pro 10

PHOTO EMBED

Sun Dec 22 2024 19:44:45 GMT+0000 (Coordinated Universal Time)

Saved by @akshva 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
    <style>
        div{
            width:500px;
            height: 100px;
            border: solid 1pt burlywood;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>AJAX JQUERY</h1>
    <h2>Load Text using AJAX without Jquery</h2>
    <button onclick="loadDoc()">Change content</button>
    <div id="loadtxt"></div>
    <script>
        function loadDoc(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(this.readyState==4 && this.status==200){
                    document.getElementById("loadtxt").innerHTML=this.responseText;
                }
            };
            xhr.open("GET","content.txt",true);
            xhr.send();
        }
    </script>

    <h2>Load Text using AJAX with Jquery</h2>
    <button id="btnload">Change content using jquery</button>
    <div id="loadjqtxt"></div>
    <script>
        $("#btnload").click(function(){
            $.ajax({url:"content.txt" ,success:function(result){
                $("#loadjqtxt").html(result);
            }});
        });
    </script>

    <h2>Get JSON in jquery</h2>
    <button id="btngetjson">get json content</button>
    <div id="studentinfo"></div>
    <script>
        $("#btngetjson").click(function(){
            $.getJSON("student.json", function(result){
                $("#studentinfo").html("USN: "+ result.usn);
                $("#studentinfo").append("<br> Name: "+ result.name);
                $("#studentinfo").append("<br> Dept: "+ result.dept);

            });
        });
    </script>

    <h2>Parse JSON in jquery</h2>
    <button id="btnparsejson">parse json content</button>
    <div id="courseinfo"></div>
    <script>
        $("#btnparsejson").click(function(){
            let txt='{"cname":"Web tech", "code":"BCSL504"}'
            let obj=jQuery.parseJSON(txt);
            $("#courseinfo").html("name: "+obj.cname);
            $("#courseinfo").append("<br> code: "+obj.code);
        });

    </script>
</body>
</html>
content_copyCOPY