How To Get Dynamic JSONP Results Using Java Script

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

JSONP is a method for sending JSON data without worrying about cross-domain issues.JSONP does not use the XMLHttpRequest object.JSONP uses the script tag instead. so today we are discuss how to dynamic result using jsonp method

How To Get Dynamic JSONP Results Using Java Script

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>

 

Related Post