jquery 的ajax请求示例和注意事项

来源：网络整理 作者：技术学习网 人气： 发布时间：2015-10-24

摘要：最近很多人问我ajax该怎么用，怎么访问后台，怎么取得数据页面显示写一个简单的ajax访问：$.ajax({ url: ctx +/meeting/getMeetingRoomMap, //请求后台地址 type:get...

最近很多人问我ajax该怎么用，怎么访问后台，怎么取得数据页面显示

 

写一个简单的ajax访问：

 

 

 

$.ajax({  

                url: ctx +"/meeting/getMeetingRoomMap",   //请求后台地址  

                type:"get",     //请求方式  

                cache:false,    //控制是否缓存数据（post请求默认false，而get请求会为true,容易造成页面数据缓存问题）  

                async:false,    //控制同步还是异步  

                data:{scheduleDate:scheduleDate},   //传入参数  

                success:function(data){  

                    if(data!=null && data!=""){  

                        $(".showMessage").html(data); //从后台获取数据的回调函数  

                    }  

                }  

            });  

 

使用ajax需要注意的两点：

 

 

1、cache属性，默认为true,  就是页面是否需要缓存的问题，很多人说明明修改了值，为什么值没变，就是因为这个属性在作怪，请求的时候，可以设置为false

 

2、async属性，默认为true， 这个属性是决定你本次ajax请求是同步还是异步。 如果没设置这个属性为false，同步的话：js也会像后台代码一样，一行一行执行下去，

默认为true，异步那就有可能出现你的ajax还没执行完，，就去执行你的下一句js了

 

其实ajax挺简单的，请求后台，获取数据回调， 然后页面展示，需要注意的就上面两点，祝你们使用愉快

————————————————————————————————

test.html

 

<a href="javascript：void(0)" onmouseover="testAsync()">

 

asy.js

 

function testAsync(){

    var temp;

    $.ajax({

        async: false,

        type : "GET",

        url : 'tet.php',

        complete: function(msg){

            alert('complete');

        },

        success : function(data) {

            alert('success');

            temp=data;

        }

    });

    alert(temp+'   end');

}

 

tet.php

 

<?php

 

    echo "here is html code";

    sleep(5);

 

?>

 

async: false,（默认是true）;

如上：false为同步，这个 testAsync()方法中的Ajax请求将整个浏览器锁死，

只有tet.php执行结束后，才可以执行其它操作。

 

当async: true 时，ajax请求是异步的。但是其中有个问题：testAsync()中的ajax请求和其后面的操作是异步执行的，那么当tet.php还未执行完，就可能已经执行了 ajax请求后面的操作，

如： alert(temp+'   end');

然而，temp这个数据是在ajax请求success后才赋值的，结果，输出时会为空。

责任编辑：技术学习网

上一篇：

下一篇：