原生ajax请求json数据

Posted 小白不白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生ajax请求json数据相关的知识，希望对你有一定的参考价值。

<!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 xml=new XMLHttpRequest();
            }else{
                var xml=new ActiveXObject("Microsoft.XMLHTTP");
            };

            //设置发送数据的地址和方法
            xml.open("POST","json.php");

            //设置我们的请求头信息,post方法才写请求头
            xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //发送数据
            xml.send();
            
            //绑定onreadystatechange事件
            xml.onreadystatechange=function(){
                if(xml.readyState==4 && xml.status==200){
                    var data=xml.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>

　　

以上是关于原生ajax请求json数据的主要内容，如果未能解决你的问题，请参考以下文章

原生Ajax与JSON实践二（Post请求）

Ajax原生请求和java对象转成json

使用原生的ajax如何去提交json格式的数据

Ajax原生请求及Json基础

08-最简洁易懂的Ajax+Json+JQuery+案例演示知识整理

原生ajax请求