ajax接收处理json格式数据

ajax在前后端的交互中应用非常广泛，通过请求后台接口接收处理json格式数据展现在前端页面。

下面我们来简单用 ajax在本地做一个接收并处理json的小例子

首先我们要新建一个叫做data的json文件data.json。

data.json文件内容是：

[
    {"name":"小海","sex":"男","address":"上海","job":"算法工程师"}
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
    *{margin:;padding:0px;font-size: 12px;}
    a{text-decoration: none;}
    ul{list-style: none;}
    #box{width:500px;margin:20px auto;}
    .btn{display:block;width:50px;height:50px;margin:20px auto;line-height: 50px;text-align: center;border:1px # solid;color:#;transition:.3s linear;}
    .btn:hover{background: #;color:#fff;font-weight: bold;}
    #con{margin-top:20px;}
    #con li{line-height: 30px;text-align: center;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            $('.btn').on('click', function(){
                $.ajax({
                    type: "POST", //请求的方式，也有get请求
                    url: "data.json", //请求地址，后台提供的,这里我在本地自己建立了个json的文件做例子
                    data: {name:name},//data是传给后台的字段，后台需要哪些就传入哪些
                    dataType: "json", //json格式，后台返回的数据为json格式的。
                    success: function(result){
                        var dataObj = result, //返回的result为json格式的数据
                        con = "";
                        $.each(dataObj, function(index, item){
                            con += "<li>姓名："+item.name+"</li>";
                            con += "<li>性别："+item.sex+"</li>";
                            con += "<li>现居地："+item.address+"</li>";
                            con += "<li>岗位："+item.job+"</li>";
                        });
                        console.log(con);    //可以在控制台打印一下看看，这是拼起来的标签和数据
                        $("#con").html(con); //把内容入到这个div中即完成
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div id="box">
        <a class="btn" href="javascript:;">点击</a>
        <ul id="con"></ul>
    </div>
</body>
</html>

$.ajax中的url参数地址是后台提供的接口链接地址。

data是需要传给后台开发人员的标识名称，方便后台根据名称在数据库中查找到需要的数据并返回json格式的数据给前端。相同域名下dataType: 'json'，不同域名下也就是跨域请求需要用dataType: 'jsonp'

请求成功后把数据通过$.each遍历输出。