异步请求(获取json数据)

Posted 2021-11-28 yslf

异步请求
　　不使用异步请求的时候,请求数据都是整个页面全部刷新一次,这样每次请求都会重新请求所有的资源.
　　很多时候不需要页面全部刷新, 只需要页面的局部数据刷新即可, 此时就需要发送异步请求来实现局部数据刷新的请求
　　异步请求简称 Ajax (Asynchronous javascript And XML) 以前 js 发送异步请求数据, 一般是xml, 现在是json了

Demo: 使用JQ发送 异步请求
方式一
html:

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

jq:

 1 $(function(){
 2     $("a").click(function(){ //为超链接绑定事件,几点之后会发送请求
 3         $.get( //发送一个 get 请求
 4             "emp/getOne",  //请求的地址
 5             {"id":7499}, //传递服务端数据
 6             function(data){  //回调函数, 当请求成功之后, 会自动调用函数, date 是服务器返回给客户端的数据
 7                 alert("服务器端返回的数据是: " + data);
 8             },
 9         "json")
10     })
11 })

方式二:

$(function(){
    $("a").click(function(){ //为超链接绑定事件,几点之后会发送请求
        $.getJSON( //发送一个 get 请求, 但只接受json 格式的响应数据
            "emp/getOne", //请求的地址
            {"id":7499}, //传递服务端数据
            function(data){ //回调函数, 当请求成功之后, 会自动调用函数, date 是服务器返回给客户端的数据
                alert("服务器端返回的数据是: " + data);
            }
        )
    })
})

方式三:

$(function(){
    $("a").click(function(){ //为超链接绑定事件,几点之后会发送请求
        $.post( //发送一个 post 请求
            "emp/getOne", //请求的地址
            {"id":7499}, //传递服务端数据
            function(data){ //回调函数, 当请求成功之后调用
                alert("服务器端返回的数据是: " + data);
        },
    "json"); //请求 json 格式的数据
    })
})

方式四:

$(function(){
    $("a").click(function(){ //为超链接绑定事件,几点之后会发送请求
        $.ajax({ //发送一个请求
            type:"post", //指定请求类型
            url:"emp/getOne", //请求地址
            data:"id=7788", //传递的数据
            dataType:"json", //指定接收的数据类型
            async:false, //锁定浏览器,只有请求处理完毕之后(回调函数调用完之后)才能执行后面的代码
            success:function(data){ //回调函数
                alert("服务器端返回的数据是: " + data);
            }
        //其他代码
        })
    })
})