原生ajax請求json數據

本文轉載自查看原文 2017-06-06 17:06 3188 js相關/ ajax

<?php
header("content-type:text/html;charset=utf-8");
echo '{"name":"小明","age":"12","sex":"男"}';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="bt1">點擊獲取json數據</button>
 
<script type="text/javascript">
    window.onload=function(){
        var bt1=document.getElementById("bt1");
        bt1.onclick=function(){
            //創建ajax對象，寫兼容
            if(window.XMLHttpRequest){
                var xhr=new XMLHttpRequest();
            }else{
                var xhr=new ActiveXObject("Microsoft.XMLHTTP");
            };
 
            //設置發送數據的地址和方法
            xhr.open("POST","json.php");
 
            //設置我們的請求頭信息,post方法才寫請求頭
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 
            //發送數據
            xhr.send();
             
            //綁定onreadystatechange事件
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var data=xhr.responseText;
                    //json字符串轉換成為json對象  , data=eval("("+data+")");evel不存在兼容性問題，但是會有安全漏洞。
                    data=JSON.parse(data);
                    var str="";
                    str+="姓名:"+data.name+"<br>";
                    str+="年齡:"+data.age+"<br>";
                    str+="性別:"+data.sex;
                    document.body.innerHTML=str;
                };
            };
 
        };
    };
</script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生AJAX 請求JSON數據方式 ajax請求json數據 ajax請求發送json數據 SpringBoot Ajax請求Json數據前后端數據交互(二)——原生 ajax 請求詳解原生 ajax get請求數據 Ajax原生請求和java對象轉成json 原生js的ajax請求 js 原生ajax請求原生Ajax請求步驟