Posted By
Bajarangi soft ,
Posted On 08-10-2020
JSONP stands for JSON with Padding.
Requesting a file from another domain can cause problems, due to cross-domain policy.
Requesting an external script from another domain does not have this problem.
JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.
Dynamic JSONP Result
Make the example dynamic by sending JSON to the php file, and let the php file return a JSON object based on the information it gets.
Let's Learn
Step 1:
Create Index.php file and implement code as below
<button class="btn btn-success" onclick="clickButton()">Click me!</button> <h2 id="demo"></h2>
Step 2:
Create json_demo.php file and implement code as below.
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("localhost", "root", "", "farm_site");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>
Step 3:
Now we implement java script to get data from database from php file.
<script>
function clickButton() {
var obj, s
obj = { table: "users", limit: 10 };
s = document.createElement("script");
s.src = "json_demo.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
Complete Code For Getting Dynamic JSONP Results Using Java Script
<!DOCTYPE html>
<html>
<head>
<title>How To Get Dynamic JSONP Results Using Java Script</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: tomato">How To Get Dynamic JSONP Results Using Java Script</h1>
</div>
<div class="well">
<button class="btn btn-success" onclick="clickButton()">Click me!</button>
<h2 id="demo"></h2>
</div>
<script>
function clickButton() {
var obj, s
obj = { table: "users", limit: 10 };
s = document.createElement("script");
s.src = "json_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</div>
</body>
</html>