This site is mobile accessible. Press the "Tap Here" button to use a different font-size.
Tap Here!

Smartphone icons created by Freepik - Flaticon

obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<table border='1'>"
    for (x in myObj) {
      txt += "<tr><td>" + myObj[x].name + "</td></tr>";
    }
    txt += "</table>"
    document.getElementById("demo").innerHTML = txt;
  }
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Choose an option:</option>
  <option value="customers">Customers</option>
  <option value="products">Products</option>
  <option value="suppliers">Suppliers</option>
</select>

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
      }
      txt += "</table>"
      document.getElementById("demo").innerHTML = txt;
    }
  };
  xmlhttp.open("POST", "json_demo_html_table.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    txt += "<select>"
    for (x in myObj) {
      txt += "<option>" + myObj[x].name;
    }
    txt += "</select>"
    document.getElementById("demo").innerHTML = txt;
  }
}
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
JSON Syntax - Access a JavaScript object part 1 JSON Syntax - Access a JavaScript object part 2 JSON Syntax - Modify a JavaScript Object part 1 JSON Syntax - Modify a JavaScript Object part 2 JSON Parse - Parsing JSON JSON Parse - JSON From the Server JSON Parse - Array as JSON JSON Parse - Parsing Dates part 1 JSON Parse - Parsing Dates part 2 JSON Parse - Parsing Dates part 3 JSON Stringify - Stringify a JavaScript Object part 1 JSON Stringify - Stringify a JavaScript Object part 2 JSON Stringify - Storing data in local storage JSON Stringify - Stringify Dates JSON Stringify - Stringify Functions part 1 JSON Stringify - Stringify Functions part 2 JSON Objects - Creating an Object from a JSON Literal part 1 JSON Objects - Creating an Object from a JSON Literal part 2 JSON Objects - Access a JavaScript Object part 1 JSON Objects - Access a JavaScript Object part 2 JSON Objects - Looping an Object part 1 JSON Objects - Looping an Object part 2 JSON Arrays - Create JavaScript Arrays JSON Arrays - Create JavaScript Arrays part 2 JSON Arrays - Accessing Array Values JSON Arrays - Accessing Array Values in Objects JSON Arrays - Looping Through an Array JSON Server - Sending Data to a Server JSON Server - Receiving Data from a Server JSON Server - JSON From a Server JSON Server - JSON returned from a server as an array: JSON Server - Get JSON Data from a PHP Server part 1 JSON Server - Get JSON Data from a PHP Server part 2 JSON Server - Get JSON Data from a PHP Server part 3 JSON Server - Get JSON Data from a PHP Server part 4 JSON Server - Get JSON Data from a PHP Server part 5 JSON HTML - Make a table based on JSON data JSON JSONP - Request JSON using the script tag JSON JSONP - Dynamic Script Tag JSON JSONP - Callback Function