异步请求
不使用异步请求的时候,请求数据都是整个页面全部刷新一次,这样每次请求都会重新请求所有的资源.
很多时候不需要页面全部刷新, 只需要页面的局部数据刷新即可, 此时就需要发送异步请求来实现局部数据刷新的请求
异步请求简称 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); } //其他代码 }) }) })