异步请求取得json数据

Posted 2021-11-04 whymoney1000

tags:

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

一、异步请求

在之前我们请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异步请求来实现这种局部数据刷新的要求,异步请求简称 Ajax(Asynchronous javascript And XML),在之前一般使用js 发送异步请求,请求的数据一般是xml,但是现在 json 出现之后就不使用xml 做为数据传输格式标准了。使用jQuery 发送异步请求,jq中的异步请求发送有很多方式，常见的方式如下:

1、方式一

$.get( //发送一个get 请求

   "test.cgi",//请求的地址

   {name: "John", time:"2pm" }, //传递服务端的数据

　　function(data){ //回调函数,当请求成功之后,会自动调用该函数,data 服务端返回给客户端数据

　　alert("Data Loaded: " + data);
　　},

"json"); //表示请求的数据格式是json格式

<script type="text/javascript" src="js/jquery.min.js"></script>

<Script type="text/javascript" src="js/login.js"></script>

</head>

<body>

<a href="javascript:void(0)">取得一个雇员信息</a>

$(function(){

　　// 为超链接绑定事件,点击之后会发送请求

　　$("a").click(function(){
　　//发送请求

　　$.get(

　　"emp/get",

　　{"id":7788}, function(data){

　　lalert("服务器端返回的数据是:"+data);
　　},

"json")
  })
})

2、方式二

$.getJSON(//发送一个get 请求,但是只接受 json 格式的响应数据
　　"test.js",
　　{ name: "John" time: "2pm" }
　　function (json) {
　　　　alert("JSON Data:" + json.users [3].name);
})

$(function(){
　　// 为超链接绑定事件,点击之后会发送请求
　　$("a").click(function(){
　　// 发送请求
　　$.getJSON(
　　　　"emp/get",
　　　　{"id":7788},
　　　　function(data){
　　　　　　alert("服务器端返回的数据是:"+data);
 　　　　})
　　})
})

使用getJSON 方式,默认取得数据就是json数据,不需要明确指定出来。如果客户端指定了要取得 json 数据则服务器端必须返回的值也是json格式的字符串数据。

4、方式三

$.ajax({
    //发送一个请求
    type:"POST", //指定请求类型
    url:"some.php", //请求地址
    data: "name=John&location=Boston", //传递的数据
    dataType:"json", //指定接收的数据类型(需要服务器端传递的数据类型)
    async: false, // 实现在请求没有完全处理之前锁定浏览器,不做后面的操作
    Success: function(msg){ //回调函数
    alert ( "Data Saved: " + msg );
    // 其他代码
});

$(function() {
    // 为超链接绑定事件,点击之后会发送请求
    var emp;
    $("a").click(function(){
    //发送请求
        $.ajax({
            type:"post",
            url:"emp/get",
            data:"id=7788",
            dataType:"json",
            success:function(data){
            emp=data;
        })
    alert(emp.ename);
    })
})

此时出现了emp 没有 ename 属性,原因是先执行了“alert(emp.ename)”代码请求才处理完毕,应该要求先把请求处理完毕之后再访问 emp.ename 才可以实现正确的操作,那么应该让请求同步(现在是异步的)

指定请求同步

$(function(){
    //为超链接绑定事件,点击之后会发送请求
    var emp;
    $("a").click(function(){
    // 发送请求
        $.ajax({
            type:"post", url:"emp/get",
            data:"id=7788",
            dataType:"json", 
            async:false, //锁定浏览器,只有请求处理完毕之后(回调函数调用完毕之后)才能执行后面的代码
            success: function(data) {
                emp=data;}
            })
    alert(emp.ename);
    }）
}）

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

扒一扒 EventServiceProvider 源代码

Django & JavaScript 用Ajax实现JSON数据的请求和响应