通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上 - 遇见未来

第一步：

　　编写基础的 html 框架内容，并引入 jquery：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>测试Ajax</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script>
            
        </script>
    </head>
    <body>
        
    </body>
</html>

第二步：

　　在 “<body></body>” 中间插入要点击的按钮和用来显示数据的<p>标签，并编写对应的 function：

　　“ajax的使用往往配合事件操作进行调用”

    <body>
        <button id="btn">点击获取数据</button>
        <p id="ganmao"></p>
    </body>

　　function：

        <script>
        $(function(){
            $("#btn").on("click", function(){
                //调用 ajax
            });
        })
        </script>

第三步：

　　使用 ajax 调用后台接口并处理数据：

                $.ajax({
                    url: 'http://localhost:53087/test/ajax',    //后端程序的url地址
                    type: 'get',
                    dataType: 'json',
                    data:{    //发送给服务器的数据，如果是get请求，也可以写在url地址的?后面
                        "city":'郑州',
                    }
                })
                .done(function(resp){        //请求成功以后的操作（resp是后端返回的json数据，值为：{"city":"郑州"}）
                    console.log(resp);
                    var data = eval('(' + resp + ')');        //data为json数据转换成的对象，值为：{city: "郑州"}
                    console.log(data);
                    var city = data['city'];
                    console.log(city);
                    
                    $('#ganmao').html(city)
                })
                .fail(function(error){        //请求失败以后的操作
                    console.log(error);
                });

合在一起的代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>测试Ajax</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script>
        $(function(){
            $("#btn").on("click", function(){
                $.ajax({
                    //后端程序的url地址
                    url: 'http://localhost:53087/test/ajax',
                    type: 'get',
                    dataType: 'json',
                    data:{    //发送给服务器的数据，如果是get请求，也可以写在url地址的?后面
                        "city":'郑州',
                    }
                })
                .done(function(resp){        //请求成功以后的操作
                    console.log(resp);
                    var data = eval('(' + resp + ')');
                    console.log(data);
                    var city = data['city'];
                    console.log(city);
                    
                    $('#ganmao').html(city)
                })
                .fail(function(error){        //请求失败以后的操作
                    console.log(error);
                });
            });
        })
        </script>
    </head>
    <body>
        <button id="btn">点击获取数据</button>
        <p id="ganmao"></p>
    </body>
</html>

View Code

运行效果：

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

PS：

　　过程中遇到了报错：“Failed to load http://localhost:53087/test/ajax: No 'Access-Control-Allow-Origin’ header is present on the requested resource” 无响应解决方法。百度找到好像是跨域问题，解决方法是在config里面加上：

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
                <add name="Access-Control-Allow-Headers" value="x-requested-with"/>
                <add name="Access-Control-Allow-Origin" value="*" />//表示允许所有来源进行跨域访问
            </customHeaders>
        </httpProtocol>
    </system.webServer>

补充学习：

　　前端处理 json 数据通常有3步：

　　　　1、得到 json 数据

　　　　2、解析 json 数据　　　　　　（可使用 js 中的 eval 函数解析 json 数据，但要为 json 数据加上括号）

　　　　3、在页面上显示数据

posted on 2019-10-30 17:51 遇见未来阅读(3654) 评论(0) 编辑收藏举报

刷新页面返回顶部