文档章节

jquery Ajax方法总结

隐逸王
 隐逸王
发布于 2017/07/06 10:06
字数 2772
阅读 12
收藏 0

1. $.load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中

•url:是指要导入文件的地址。 
•data:可选参数,发送至服务器的 key/value 数据;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
•callback:可选参数;是指调用load方法并得到服务器响应后(不需要是success的),再执行的另外一个函数,包含参数:responseText, textStatus, XMLHttpRequest。

下面是几个示例:

1.加载一个php文件,该php文件不含传递参数

$("#myID").load("/test.php");//在id为#myID的元素里导入test.php运行后的结果

2.加载一个php文件,该php文件含有一个传递参数 

$("#myID").load("/test.php",{"name":"Adam"});//导入的php文件含有一个传递参数,类似于请求url:/test.php?name=Adam

3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔 

$("#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});//导入的php文件含有一个传递参数,类似于请求url:/test.php?name=Adam&site=www.phpernote.com

4. 加载一个php文件,该php文件以数组作为传递参数

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com"]});//导入的php文件含有一个数组传递参数。 

注意:使用load,默认是get方式传递,如果有data参数,则这些参数都是以post方式传递的,因此,在/test.php里要以POST方式获取data传递的数值。总之,地址后面跟着的参数则永远以get方式传递,而data中的参数传递方式由传递方法(get 或 post)决定!

5.关于callback回调函数 

$("#go").click(function(){
    $("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam"}, function(){
         $("#myID").fadeIn('slow');
    });
});

//在load方法得到服务器响应后,慢慢地显示加载的内容

6.加载页面片段

$("#result").load("/test.html #container");//加载test.html页面中id为container元素中的内容(包含container元素)到本页面id为result的容器中

.load() 方法允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。 

$(".load").load("test.html .post",function(responseText,textStatus, XMLHttpRequest){
        this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] 
        alert(responseText);//请求返回的内容
        alert(textStatus);//请求状态:success,error
        alert(XMLHttpRequest);//XMLHttpRequest对象
});//动态加载

 7. 防止jquery.load使用缓存的方法

    缓存这东西,在一定程度上加快了页面的装载,但是也常常给我们带来麻烦。在实际运用中,我们可能会碰到浏览器缓存的问题。解决办法:

1.把下面的语句加在head的javascript文件里,就可以解决问题:

$.ajaxSetup({
cache: false //关闭AJAX相应的缓存
});

2.在test.html后加上特定时间,比如test.html?20170623。

3.在test.html文件的顶部加入以下声明:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

另外,在使用jquery.load的时候需要注意的是:

(1)如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

(2)只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。

(3)jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

2.$.get( url, [data], [callback] ):使用get方式来进行异步请求

  • url (String) :  发送请求的URL地址.
  • data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。
  • callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。参数为:data,status。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

1.请求test.php页面,忽略返回值:

$.get("test.php"); 

2.请求test.php页面,传递两个参数,忽略返回值:

$.get("test.php", { name: "John", time: "2pm" } ); 

3. 显示 test.php 返回值(HTML 或 XML,取决于返回值):

$.get("test.php", function(data){
      alert("Data Loaded: " + data);
});

4. 显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

$.get("test.cgi", { name: "John", time: "2pm" },function(data){
        alert("Data Loaded: " + data);
  });

5.回调函数: 

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
    //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
    this; // 在这里this指向的是Ajax请求的选项配置信息
    alert(data);
    alert(textStatus);//请求状态:success,error等等。
    //当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
    alert(this);
});

 6.防止jquery.get方法缓存的方法:

在$.get()的data后面加上新的随机参数,如{data: mydata, stamp: Math.random() },由于每次数据不一样,故请求后返回的数据不会缓存。

另外也可把$.get()改成$.post(),也可解决此问题。

一劳永逸的解决办法是设置全局参数,$.ajaxSetup({cache:false});这样设置后,基本所有的get请求jquery都会自动加上_1948838字样的附加参数,总体来说与上面的解决方法类似。

比如:

$.get("test.php", { "cid": $drpCountry.val(), "time": new Date().getTime() }, function(data, returnStatus) {})

 3. jQuery.post(url,data,success(data, textStatus,jqXHR),dataType):使用POST方式来进行异步请求

  • url (String) : 发送请求的URL地址;
  • data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示;
  • success(data, textStatus, jqXHR): (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法);
  • type (String) : (可选)规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就 和$.get()返回的格式一样,都是字符串的。
  • 该函数是简写的Ajax函数,等价于:
  • $.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });

     

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

Ajax.aspx:
Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

jQuery 代码:
$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus){
    // data 可以是 xmlDoc, jsonObj, html, text, 等等.
    this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
    alert(data.result);

}, "json");

例子 1

请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):

$.post("test.php", { name: "John", time: "2pm" } );

例子 2

向服务器传递数据数组(同时仍然忽略返回值):

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

例子 3

使用 ajax 请求发送表单数据:

$.post("test.php", $("#testform").serialize());

例子 4

输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
 });

例子 5

向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

例子 6

获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     process(data);
   }, "xml");

例子 7

获得 test.php 页面返回的 json 格式的内容:

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

注意:

1.由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。
2.如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

 

4.jQuery.getScript(url,success(response,status)): 通过 GET 方式请求载入并执行一个 JavaScript 文件。

  • url (String) : 待载入 JS 文件地址。
  • success(response,status): (可选) 成功载入后回调函数。
  • 该函数是简写的Ajax函数,等价于:
  • $.ajax({
      url: url,
      dataType: "script",
      success: success
    });

     

getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨 域载入JS文件(神奇……?!)。这个函数的意义是巨大 的,它可以很大程度的缩减页面初次载入的代码量,因为你可以根据用户的交互来载入相应的JS文件,而不必在页面初始化的时候全部载入。

$.getScript("test.js", function(){
     alert("Script loaded and executed.");
}); 

载入jQuery 官方颜色动画插件成功后绑定颜色变化动画:

HTML 代码:

<button id="go">Run</button>
<div class="block"></div>

jQuery 代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});

 5.jQuery.getJSON(url,data,success(data,status,xhr)):通过HTTP GET请求载入JSON数据。

参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数:

  • response - 包含来自请求的结果数据
  • status - 包含请求的状态
  • xhr - 包含 XMLHttpRequest 对象

该函数是简写的 Ajax 函数,等价于:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象(映射),那么在附加到 URL 之前将转换为字符串,并进行 URL 编码。

传递给 callback 的返回数据,可以是 JavaScript 对象,或以 JSON 结构定义的数组,并使用 $.parseJSON() 方法进行解析。

示例

使用 AJAX 请求来获得 JSON 数据,并输出结果:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
});

从 Flickr JSONP API 载入 4 张最新的关于猫的图片:

HTML 代码:

<div id="images"></div>

jQuery 代码:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});

从 test.js 载入 JSON 数据,附加参数,显示 JSON 数据中一个 name 字段数据:

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

 

© 著作权归作者所有

隐逸王
粉丝 1
博文 14
码字总数 20008
作品 0
西安
程序员
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.6K
9
JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538
2018/04/04
0
0
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0
jQuery、ajax、JSON

最近在做项目的过程中,对于jQuery、ajax、JSON这三者的关系总是理不清楚,于是,在简单是使用,有了丁点的经验,于是对这三者的关系做了下研究: 1、jQuery : 以下来自百度百科 jQuery是一个...

伊人心
2018/12/28
0
0
jquery技巧总结

一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将...

晨曦之光
2012/03/09
204
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部