jquery中ajax事情详解 (附演示代码)51CTO博客 - 凯时娱乐

jquery中ajax事情详解 (附演示代码)51CTO博客

2019年04月12日08时30分12秒 | 作者: 书雁 | 标签: 事情,恳求,函数 | 浏览: 471

首先看个ajax恳求实例:

<script src="jquery_1.4.2.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){//ajax回调函数 按以下次序履行
  
  $(.log).ajaxStart(function() {
    $(this).text(恳求前履行ajaxStart,开端恳求,Loading...);
    alert(恳求前履行ajaxStart,开端恳求,Loading...);
  });
  $(.log).ajaxSend(function() {
    $(this).text(Ajax恳求行将发送ajaxSend,正在恳求,加载中...));
    alert(Ajax恳求行将发送ajaxSend,正在恳求,加载中...));
  });
  $(.log).ajaxSuccess(function() {
    $(this).text(Ajax恳求成功ajaxSuccess);
    alert(Ajax恳求成功ajaxSuccess);
  });
  $(.log).ajaxError(function() {
    $(this).text(ajax恳求失利ajaxError);
    alert(ajax恳求失利ajaxError);
  });
  $(.log).ajaxComplete(function() {
    $(this).text(是否成功都会履行ajaxComplete);
    alert(是否成功都会履行ajaxComplete);
  });
  $(.log).ajaxStop(function() {
    $(this).text(Ajax恳求完结ajaxStop);
    alert(Ajax恳求完结ajaxStop);
  });
  
  $(.trigger).click(function() {
    $.get("sql.php",{"id":"123"},function(data,status){
    if(status  "success"){
      alert("外部内容加载成功!");
      alert(data);
    }
    if(status  "error"){
      alert("Error: "+xhr.status+": "+xhr.statusText);
    }
    });
  });
})
</script>

<button >触发</button>

<div ></div>


附:sql.php中代码

<?php
  if($_GET){
    $id=$_GET[id];
    if( !empty($id) && $id123 ){
    echo 1;//履行成功
    }
    else{
    echo 0;//履行失利
    }
  }
?>


履行成果:


留意:一个页面只能用一次 以上回调函数(怎样差异呢?)。

<button >触发</button>

<div ></div>




一,$.get(url,[data],[callback])

阐明:url为恳求地址,data为恳求数据的列表(是可选的,也能够即将传的参数写在url里边),callback为恳求成功后的回调函数,该函数承受两个参数,第一个为效劳器回来的数据,第二个参数为效劳器的状况,是可选参数。而其间,效劳器回来数据的格局其实是字符串局势,并不是咱们想要的json数据格局,在此引证仅仅为了比照阐明。

$.get("data.php",$("#firstName.val()"),function(data){
   $("#getResponse").html(data); }//回来的data是字符串类型
);


二,$.post(url,[data],[callback],[type])

阐明:这个函数跟$.get()参数差不多,多了一个type参数,type为回来的数据类型,能够是html,xml,json等类型,假如咱们设置这个参数为:json,那么回来的格局则是json格局的,假如没有设置,就 和$.get()回来的格局相同,都是字符串的。

$.post("emp.do?p=getAllEmp",{id:deptId,x:Math.random()},function(data){
    var arry = eval("("+data+")");//去引号,将json字符串去引号编程json类型数组,也能够在$.post函数后边加一个参数"json",指定接纳的数据为json类型的
    for(var i=0;i<arry.length;i++){
      var op = new Option(arry[i].empName,arry[i].empId);
      document.getElementById("emp").options.add(op);
    }
    });


也能够写成下面这样,回来的便是json类型数组了,就不要难曩昔引号了,能够直接遍历。

$.post("emp.do?p=getAllEmp",{id:deptId,x:Math.random()},function(arry){
  for(var i=0;i<arry.length;i++){
   var op = new Option(arry[i].empName,arry[i].empId);
   document.getElementById("emp").options.add(op);
  }
},"json");

三,$.ajax(opiton)

阐明:$.ajax()这个函数功用强大,能够对ajax进行许多准确的操控,需求详细阐明的请参照相关材料

$.ajax({
  url: "ajax/ajax_selectPicType.jsp",
  data:{Full:"fu"},
  type: "POST",
  dataType:json,
  success:CallBack,
  error:function(er){
  BackErr(er);}
});


四,$.getJSON(url,[data],[callback])

阐明:$.getJSON(url,[data],[callback])函数没有type参数,回来的是json类型的,不需求转化。

$.getJSON("dep.do?p=getAllDep",{x:Math.random()},function(arry){
   for(var i=0;i<arry.length;i++){
   var op = new Option(arry[i].deptName,arry[i].deptId);
   document.getElementById("dep").options.add(op);
   }
});


jquery的其他一些函数:

载入静态页面

load( url, [data], [callback] );
url (String) 恳求的HTML页的URL地址
data (Map)(可选参数) 发送至效劳器的 key/value 数据
callback (Callback) (可选参数) 恳求完结时(不需求是success的)的回调函数

load()办法能够轻松载入静态页面内容到指定jQuery目标。
$(#ajax-div).load(data.html);


这样,data.html的内容将被载入到ID为ajax-div的DOM目标之内。你乃至能够经过拟定ID来完结载入部分内容的Ajax操作,如:


$(#ajax-div).load(data.html#my-section);
完结GET和POST办法

get( url, [data], [callback] )
url (String) 发送恳求的URL地址.
data (Map)(可选参数) 要发送给效劳器的数据,以 Key/value 的键值对办法表明,会做为QueryString附加到恳求URL中
callback (Callback) (可选参数) 载入成功时回调函数(只要当Response的回来状况是success才是调用该办法)

很显然这是一个专门完结GET办法的函数,运用起来也适当的简略
$.get(login.jsp, {
  id      : Robin,
  password: 123456,
  gate    : index
 }, function(data, status) {
  //data为回来目标,status为恳求的状况
  alert(data);
  //此刻假定效劳器脚本会回来一段文字"你好,Robin!",
那么浏览器就会弹出对话框显现该段文字
  alert(status);
  //成果为success, error等等,但这里是成功时才干运转的函数
 });


post( url, [data], [callback], [type] )

url (String) 发送恳求的URL地址.
data (Map)(可选参数) 要发送给效劳器的数据,以 Key/value 的键值对办法表明
callback (Callback) (可选参数) 载入成功时回调函数(只要当Response的回来状况是success才是调用该办法)
type (String) (可选参数) 恳求数据的类型,xml,text,json等

同样是jQuery供给的一个简练函数,其实用法

$.post(regsiter.jsp, {
  id:Robin,
  password: 123456,
  type:user
 },function(data, status) {
  alert(data);
 }, "json");


事情驱动的脚本载入函数:getScript()

getScript( url, [callback] )
url (String) 待载入 JS 文件地址
callback (Function) (可选) 成功载入后回调函数

getScript()函数能够长途载入JavaScript脚本而且履行。这个函数能够跨 域载入JS文件(奇特……?!)。这个函数的含义是巨大 的,它能够很大程度的减缩页面初度载入的代码量,由于你能够依据用户的交互来载入相应的JS文件,而不用在页面初始化的时分悉数载入。

$.getScript(ajaxEvent.js, function() {
  alert("Scripts Loaded!");
  //载入ajaxEvent.js,而且在成功载入后显现对话框提示。
 });


构建数据通讯的桥梁:getJSON()

getJSON(url,[data],[callback])
url (String) 发送恳求地址
data (Map) (可选) 待发送 Key/value 参数
callback (Function) (可选) 载入成功时回调函数。

JSON是一种抱负的数据传输格局,它能够很好的交融与JavaScript或其他宿主语 言,而且能够被JS直接运用。运用JSON比较传统的经过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,仅仅设置了JSON参数的 ajax()函数的一个简化版别。这个函数也是能够跨域运用的,比较get()、post()有必定优势。别的这个函数能够经过把恳求url写 成”myurl?callback=X”这种格局,让程序履行回调函数X。

$.getJSON(feed.jsp,{
  request: images,
  id:      001,
  size:    large
  }, function(json) {
   alert(json.images[0].link);
   //此处json便是长途传回的json目标,假定其格局如下:
   //{images : [
   // {link: images/001.jpg, x :100, y : 100},
   // {link: images/002.jpg, x : 200, y 200:}
   //]};
  }
);


更底层的ajax()函数
尽管get()和post()函数十分简练易用,可是关于更杂乱的一些规划需求仍是无法完结,比方在ajax发送的不一起段做出不同的动作等。jQuery供给一个更为详细的函数:ajax()。

ajax( options )
ajax()供给了一大票参数,所以能够完结适当杂乱的功用。

参数名 类型 描绘
url String (默许: 当前页地址) 发送恳求的地址。
type String (默许: “GET”) 恳求办法 (“POST” 或 “GET”), 默许为 “GET”。
留意:其它 HTTP 恳求办法,如 PUT 和 DELETE 也能够运用,但仅部分浏览器支撑。
timeout Number 设置恳求超时时刻(毫秒)。此设置将掩盖大局设置。
async Boolean (默许: true) 默许设置下,一切恳求均为异步恳求。
假如需求发送同步恳求,请将此选项设置为 false。
留意,同步恳求将锁住浏览器,用户其它操作有必要等候恳求完结才干够履行。
beforeSend Function 发送恳求前可修正 XMLHttpRequest 目标的函数,如增加自界说 HTTP 头。

XMLHttpRequest 目标是仅有的参数。

function (XMLHttpRequest) {
this; // the options for this ajax request
}



cache Boolean (默许: true) jQuery 1.2 新功用,设置为 false 将不会从浏览器缓存中加载恳求信息。
complete Function 恳求完结后回调函数 (恳求成功或失利时均调用)。

参数: XMLHttpRequest 目标,成功信息字符串。

function (XMLHttpRequest, textStatus) {
this; // the options for this ajax request
}



contentType String (默许: “application/x-www-form-urlencoded”) 发送信息至效劳器时内容编码类型。默许值合适大多数运用场合。
data Object,
String 发送到效劳器的数据。将主动转化为恳求字符串格局。GET 恳求中将附加在 URL 后。
检查 processData 选项阐明以制止此主动转化。有必要为 Key/Value 格局。
假如为数组,jQuery 将主动为不同值对应同一个称号。
如 {foo:["bar1", "bar2"]} 转化为 ‘&foo=bar1&foo=bar2′。
dataType String 预期效劳器回来的数据类型。假如不指定,jQuery 将主动依据 HTTP 包 MIME 信息
回来 responseXML 或 responseText,并作为回调函数参数传递,可用值:

“xml”: 回来 XML 文档,可用 jQuery 处理。

“html”: 回来纯文本 HTML 信息;包括 script 元素。

“script”: 回来纯文本 JavaScript 代码。不会主动缓存成果。

“json”: 回来 JSON 数据 。

“jsonp”: JSONP 格局。运用 JSONP 办法调用函数时,

如 “myurl?callback=?” jQuery 将主动替换 ? 为正确的函数名,以履行回调函数。

error Function (默许: 主动判别 (xml 或 html)) 恳求失利时将调用此办法。

这个办法有三个参数:XMLHttpRequest 目标,过错信息,(或许)捕获的过错目标。

function (XMLHttpRequest, textStatus, errorThrown) {
// 通常状况下textStatus和errorThown只要其间一个有值
this; // the options for this ajax request
}



global Boolean (默许: true) 是否触发大局 AJAX 事情。设置为 false 将不会触发大局 AJAX 事情,

如 ajaxStart 或 ajaxStop 。可用于操控不同的Ajax事情

ifModified Boolean (默许: false) 仅在效劳器数据改动时获取新数据。

运用 HTTP 包 Last-Modified 头信息判别。

processData Boolean (默许: true) 默许状况下,发送的数据将被转化为目标(技术上讲并非字符串)

以合作默许内容类型 “application/x-www-form-urlencoded”。

假如要发送 DOM 树信息或其它不期望转化的信息,请设置为 false。

success Function 恳求成功后回调函数。这个办法有两个参数:效劳器回来数据,回来状况

function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this;
// the options for this ajax request
}



你 能够指定xml、script、html、json作为其数据类型,能够为beforeSend、error、sucess、complete等状况设置 处理函数,很多其它参数也能够订完完全全界说用户的Ajax体会。下面的比方中,咱们用ajax()来调用一个XML文档:

$.ajax({
   url: doc.xml,
   type: GET,
   dataType: xml,
   timeout: 1000,
   error: function(){
       alert(Error loading XML document);
   },
   success: function(xml){
       alert(xml);
 //此处xml便是XML的jQuery目标了,你能够用find()、next()或XPath等办法在里边寻觅节点,
和用jQuery操作HTML目标没有差异
   }
});


进一步了解AJAX事情
前面评论的一些办法都有自己的事情处理机制,从页面全体来说,都只能说是部分函数。jQuery供给了AJAX大局函数的界说,以满意特别的需求。下面是jQuery供给的一切函数(依照触发次序排列如下):

ajaxStart
(大局事情) 开端新的Ajax恳求,而且此刻没有其他ajax恳求正在进行
beforeSend
(部分事情) 当一个Ajax恳求开端时触发。假如需求,你能够在这里设置XMLHttpRequest目标
ajaxSend
(大局事情) 恳求开端前触发的大局事情
success
(部分事情) 恳求成功时触发。即效劳器没有回来过错,回来的数据也没有过错
ajaxSuccess
大局事情大局的恳求成功
error
(部分事情) 仅当发作过错时触发。你无法一起履行success和error两个回调函数
ajaxError
大局事情大局的发作过错时触发
complete
(部分事情) 不论你恳求成功仍是失利,即便是同步恳求,你都能在恳求完结时触发这个事情
ajaxComplete
大局事情大局的恳求完结时触发
ajaxStop
(大局事情) 当没有Ajax正在进行中的时分,触发
部分事情在之前的函数中都有介绍,咱们首要来看看大局事情。对某个目标进行大局事情监听,那么大局中的AJAX动作,都会对其产生影响。比方,当页面在进行AJAX操作时,ID为”loading”的DIV就显现出来:


$("#loading").ajaxStart(function(){
 $(this).show();
 });


大局事情也能够协助你编写大局的过错相应和成功相应,而不需求为每个AJAX恳求独立设置。有必要指出,大局事情的参数是很有用的。除了 ajaxStart、ajaxOptions,其他事情均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事情自身;第二个是XHR目标;第三个是你传递的ajax参数目标。在一个目标里显现大局的AJAX状况:


$("#msg").beforeSend(function(e,xhr,o) {
  $(this).html("正在恳求"+o.url);
 });
$("#msg").ajaxSuccess(function(e,xhr,o) {
  $(this).html(o.url+"恳求成功");
 });
$("#msg").ajaxError(function(e,xhr,o) {
  $(this).html(o.url+"恳求失利");
});


很显然,第三个参数也能够协助你传递你在AJAX事情里参加的自界说参数。 在单个AJAX恳求时,你能够将global的值设为false,以将此恳求独立于AJAX的大局事情。


$.ajax({
  url: "request.jsp",
  global: false,
  // 禁用大局Ajax事情.
});


假如你想为大局AJAX设置参数,你会用上ajaxSetup()函数。例如,将一切AJAX恳求都传递到request.php,;禁用大局办法;强制用POST办法传递:


$.ajaxSetup({
 url: "request.jsp",
 global: false,
 type: "POST"
});


版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表凯时娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章