一, 异步请求
在之前我们请求数据的时候都是整个页面全部刷新了一次, 也就是每次请求都会重新请求所有的资源. 但是在很多时候不需要页面全部刷新, 仅仅是需要页面的局部数据刷新即可, 此时需要发送异步请求来实现这种局部数据刷新的要求, 异步请求简称 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);
- })
- })
来源: http://www.bubuko.com/infodetail-3040892.html