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

最近很多人问我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后才赋值的,结果,输出时会为空。

时间: 2024-11-25 04:49:23

jquery 的ajax请求示例和注意事项的相关文章

jQuery发送Ajax请求以及出现的问题

普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data:{ phoneNo:$(".tel").val() }, success: function(data){ $.toast("发送成功", "text") }, error: function(){ $.toast("发送失败"

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

PHP服务器文件管理器开发小结(三):使用jQuery提交AJAX请求

本节将讨论使用jQuery提交AJAX请求的基本方法,并完成显示首文件夹的基本方法. 同时,本节也将讨论使用图片链接提交请求的基本方法. jQuery是一套强大的JS库,将复杂的JS操作封装成简洁的语句,并提供对AJAX的支持.通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本.HTML.XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中.编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现

【jquery】ajax 请求成功后新开窗口被拦截解决方法

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

Angular和jQuery的ajax请求的差别

近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

Angular和jQuery的ajax请求的区别

最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8 contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8') Type: String Wh

JQuery发送ajax请求不能用数组作为参数

JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var selectedMembers = document.getElementsByName('selectedMembers');        var cwIds = new Array(); //定义数组        for(var i=0;i<selectedMembers.length;i++){  

前端跨域之Jsonp的原生请求和Jquery的ajax请求,简单易懂。

前言 :本文示例部署在XAMPP建站集成软件包上,在localhost环境下进行测试 1.什么是跨域 由于浏览器同源策略,凡是发送请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域.存在跨域的情况 : (1)网络协议不同,如http协议访问https协议. (2)端口不同,如8080端口访问3000端口. (3)域名不同,如aaaa.com访问bbbb.com. (4)子域名不同,如java.ddd.com访问qianduan.ddd.com. (5)域名和域名对应ip,如ww