温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-24 03:50:27 来源:网络 阅读:363 作者:没有水勒鱼 栏目:web开发

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


写一个简单的ajax访问:




  1. $.ajax({  

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

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

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

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

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

  7.                 success:function(data){  

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

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

  10.                     }  

  11.                 }  

  12.             });  


使用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后才赋值的,结果,输出时会为空。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI