在这篇文章中,我们将为您详细介绍谈谈Jqueryajax中success和complete有哪些不同点的内容。此外,我们还会涉及一些关于$.ajax({})方法success,error,comple
在这篇文章中,我们将为您详细介绍谈谈Jquery ajax中success和complete有哪些不同点的内容。此外,我们还会涉及一些关于$.ajax({})方法success,error,complete,beforeSend使用例子及解释、$.ajax({})方法中的回调函数beforeSend,success,complete,error使用示例、$.ajax的beforeSend,success, complete,error例子、Ajax Autocomplete for jQuery 配置的知识,以帮助您更全面地了解这个主题。
本文目录一览:- 谈谈Jquery ajax中success和complete有哪些不同点
- $.ajax({})方法success,error,complete,beforeSend使用例子及解释
- $.ajax({})方法中的回调函数beforeSend,success,complete,error使用示例
- $.ajax的beforeSend,success, complete,error例子
- Ajax Autocomplete for jQuery 配置
谈谈Jquery ajax中success和complete有哪些不同点
废话不多说了,先给大家贴一段代码看看吧,
success : 当请求成功时调用的函数。这个函数会得到一个参数:从服务器返回的数据。当请求成功时调用函数,即status==200。
complete :当请求完成时调用的函数。这个函数会得到两个参数:XMLHttpRequest对象和一个描述请求成功的类型的字符串。当请求完成时调用函数,即status==404、403、302...。
所以,在写success或者complete的方法时,注意传入的参数,和使用传进来参数对象来解决我们的问题
参数列表:
normal; font: 14px/26px Arial; white-space: normal; color: rgb(0,0); word-spacing: 0px; -webkit-text-stroke-width: 0px">
<span>this; <span>// the options for this ajax request
}</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><h3>cache</h3></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: true) jQuery 1.2 新<a href="https://www.jb51.cc/tag/gongneng/" target="_blank">功能</a>,设置为 false 将不会从浏览器缓存中加载请求信息。</td>
</tr>
<tr>
<td valign="top" width="90"><h3>complete</h3></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">请求完成后回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a> (请求成功或失败时均<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank">调用</a>)。参数: XMLHttpRequest 对象,成功信息字符串。
<pre><span>function (XMLHttpRequest,textStatus) {
<span>// the options for this ajax request
}</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><h3>contentType</h3></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: "application/x-www-form-urlencoded") 发送信息至服务器时<a href="https://www.jb51.cc/tag/neirong/" target="_blank">内容</a>编码类型。<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认值适合大多数应用场合。</td>
</tr>
<tr>
<td valign="top" width="90"><h3>data</h3></td>
<td valign="top" width="83">Object,
String</td>
<td valign="top" width="419">发送到服务器的数据。将<a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以<a href="https://www.jb51.cc/tag/jinzhi/" target="_blank">禁止</a>此<a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>转换。必须为 Key/Value 格式。如果为数组,jQuery 将<a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>为不同值对应同<a href="https://www.jb51.cc/tag/yige/" target="_blank">一个</a><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank">名称</a>。如 {foo:["bar1","bar2"]} 转换为 '&foo=bar1&foo=bar2'。</td>
</tr>
<tr>
<td valign="top" width="90"><h3>dataType</h3></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">预期服务器返回的数据类型。如果不指定,jQuery 将<a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a>参数传递,可用值:</p>
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">"xml": 返回 XML 文档,可用 jQuery 处理。</p>
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">"html": 返回纯文本 HTML 信息;包含 script 元素。</p>
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">"script": 返回纯文本 JavaScript <a href="https://www.jb51.cc/tag/daima/" target="_blank">代码</a>。不会<a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>缓存结果。</p>
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">"json": 返回 JSON 数据 。</p>
<phttps://www.jb51.cc/tag/ott/" target="_blank">ott</a>om: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">"jsonp":<span><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" target="_blank">JSONP</a><span>格式。使用<span><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/" target="_blank">JSONP</a><span>形式<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank">调用</a><a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a>时,如 "myurl?callback=?" jQuery 将<a href="https://www.jb51.cc/tag/zidongtihuan/" target="_blank">自动替换</a> ? 为正确的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a>名,以执行回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a>。</p>
</td>
</tr>
<tr>
<td valign="top" width="90"><h3>error</h3></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: <a href="https://www.jb51.cc/tag/zidong/" target="_blank">自动</a>判断 (xml 或 html)) 请求失败时将<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank">调用</a>此<a href="https://www.jb51.cc/tag/fangfa/" target="_blank">方法</a>。这个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank">方法</a>有三个参数:XMLHttpRequest 对象,<a href="https://www.jb51.cc/tag/cuowu/" target="_blank">错误</a>信息,(可能)捕获的<a href="https://www.jb51.cc/tag/cuowu/" target="_blank">错误</a>对象。
<pre><spancolor: rgb(0,0)">// 通常情况下textStatus和errorThown只有其中<a href="https://www.jb51.cc/tag/yige/" target="_blank">一个</a>有值
<span>// the options for this ajax request
}</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><h3>global</h3></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件</td>
</tr>
<tr>
<td valign="top" width="90"><h3>ifModified</h3></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: false) 仅在服务器数据改变时<a href="https://www.jb51.cc/tag/huoqu/" target="_blank">获取</a>新数据。使用 HTTP 包 Last-Modified 头信息判断。</td>
</tr>
<tr>
<td valign="top" width="90"><h3>processData</h3></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认: true) <a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合<a href="https://www.jb51.cc/tag/mo/" target="_blank">默</a>认<a href="https://www.jb51.cc/tag/neirong/" target="_blank">内容</a>类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。</td>
</tr>
<tr>
<td valign="top" width="90"><h3>success</h3></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">请求成功后回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank">函数</a>。这个<a href="https://www.jb51.cc/tag/fangfa/" target="_blank">方法</a>有两个参数:服务器返回数据,返回状态
<pre><span>function (data,0)">// data <a href="https://www.jb51.cc/tag/Could/" target="_blank">Could</a> be xmlDoc,jsonObj,html,text,etc...
<span>// the options for this ajax request
}</pre>
</td>
</tr>
好了,由于时间原因,本文先给大家介绍到这里,希望本文分享能够给大家带来灵感,帮助大家更好的学习javascript ajax success complete相关知识。
总结
以上是小编为你收集整理的谈谈Jquery ajax中success和complete有哪些不同点全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
Ajax相关文章
- • 学会iframe并用其解决跨域问题
- • 【Ajax】全面详细了解git的基础操作【万
- • 什么是Ajax?
- • 基于Vue、Axios、Node.js的图书管理系统
- • Ajax简介与基本使用
- • b站黑马JavaScript的Ajax案例代码——聊
- • Ajax(实现前后端交互效果)
- • Filter&Listener&Ajax的介绍
- • 第一节:ExtJS调用WCF系列-----实现JSO
- • Asp.Net开发架构设计(二)
$.ajax({})方法success,error,complete,beforeSend使用例子及解释
在与后台交互的时候,经常使用到jquery的$.ajax()方法来请求数据;
回调函数用的比较多的是success,但是complete、beforeSend、error函数也是很有用的;
下面是使用例子小结:
HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>ajax_demo</title> </head> <style> .display{ width:600px; height: 400px; border:1px solid; } </style> <body> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">展示数据区域:</div> <divhttps://www.jb51.cc/tag/dis/" target="_blank">display"/></div> <input type="button" value="点击获取数据" id="inp" onclick="getData()"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript">js代码:
<script type="text/javascript"> function getData(){ $.ajax({ url:'http://192.168.31.227/sfytjjk/wdaj/wdla.PHP',type:"post",timeout:5000,async:true,cache:true,data:"user_id=12&page=0",dataType:"json",contentType:"application/x-www-form-urlencoded",beforeSend:function(XMLHttpRequest){ console.log(this); $("#inp").val("正在获取数据..."); },success:function(data){ console.log(data); $(".display").html("获取到的数据:</br>"); $(".display").append("总条数:"+data.data.all_count); $("#inp").val("点击获取数据"); },complete:function(XMLHttpRequest,textStatus){ if(textStatus=='timeout'){ var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xmlhttp.abort(); $(".Box").html("网络超时!"); } $("#inp").val("点击获取数据"); },error:function(XMLHttpRequest,textStatus){ console.log(XMLHttpRequest); //XMLHttpRequest.responseText XMLHttpRequest.status XMLHttpRequest.readyState console.log(textStatus); $(".Box").html("服务器错误!"); } }); /* 通过捕捉error事件来获取出错的信息: error: function(XMLHttpRequest,textStatus,errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } XMLHttpRequest.readyState: 状态码的意思 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了 status:返回的HTTP状态码,比如常见的404,500等错误代码。 statusText:对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。 responseText :服务器响应返回的文本信息 complete: function (XMLHttpRequest,textStatus) { //textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror },error: function (XMLHttpRequest,errorThrown) { //textStatus的值:null,parsererror //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error. } */ } </script>关于ajax的开始的一些参数,cache,contentType等等,自己查下看看就明白了。
$.ajax({})方法中的回调函数beforeSend,success,complete,error使用示例
在与后台交互的时候,经常使用到jquery的$.ajax()方法来请求数据。回调函数用的比较多的是success,但是beforeSend、complete、error函数也是很有用的。
下面是使用例子小结:
$.ajax({
url: "pro/test.php",
type: "post",
timeout: 5000,
async: true,
cache: true,
data: $(''#jsForm'').serialize(),
dataType: "json",
contentType: "application/x-www-form-urlencoded",
beforeSend: function(XMLHttpRequest){
console.log(this);
$("#inp").val("正在获取数据...");
},
success: function(data){
console.log(data);
$(".display").html("获取到的数据:</br>");
$(".display").append("总条数:"+data.data.all_count);
$("#inp").val("点击获取数据");
},
complete: function(XMLHttpRequest,textStatus){
if(textStatus==''timeout''){
var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
xmlhttp.abort();
$(".box").html("网络超时!");
}
$("#inp").val("点击获取数据");
},
error: function(XMLHttpRequest, textStatus){
console.log(XMLHttpRequest); //XMLHttpRequest.responseText XMLHttpRequest.status XMLHttpRequest.readyState
console.log(textStatus);
$(".box").html("服务器错误!");
}
});
至此。转载请注明出处。
$.ajax的beforeSend,success, complete,error例子
jquery ajax官方文档: http://api.jquery.com/jquery.ajax/
常用的ajax形式:
$.ajax({ url: "http://192.168.2.46:8000/account/getjson/",type: "post",dataType: "json",// 跨域使用jsonp contentType: "application/x-www-form-urlencoded; charset=UTF-8" data: { "user": "admin","password": "123456" },beforeSend: function(XMLHttpRequest) { // do something... return true; },success: function(data) { // alert(JSON.stringify(data)); // do something... },complete: function(XMLHttpRequest,textStatus) { // textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror },error: function(XMLHttpRequest,textStatus,errorThrown) { // textStatus的值:null,parsererror // errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error } });
Ajax Autocomplete for jQuery 配置
原文:https://github.com/devbridge/jQuery-Autocomplete#ajax-only-settings
通用设置
(1)noCache
默认值false,是否缓存suggestion结果。
(2)delimiter
可选,String或正则表达式,拆分输入值,并取最后一部分用于查询suggestion。
(3)minChars
默认值1,触发autosuggest的最小字符数
(4)triggerSelectOnValidInput
默认值true,如果匹配了suggestion是否触发select方法。
(5)preventBadQueries
默认值true,如果有一个前缀没有获取结果,是否阻止以此开头的其它ajax请求。
(6)autoSelectFirst
默认值false,如果设置为true,当显示suggestion时是否第一项被选择。
(7)beforeRender
可选 ,function(container,suggestions){} 在显示suggestions之前调用。
(8)formatResult
可选, function(suggestion,currentValue){},格式化suggestion项到suggestion container中。
(9)formatGroup
可选,function(suggestion,category){},格式化分组头
(10)groupBy
可选, 指定用于分组的属性。
(11)maxHeight
默认300,suggestion container的最大高度(pixels)
(12)width
默认值auto,suggestion container的宽度(pixels),flex是最大suggestion大小,auto取input的宽度。
(13)zIndex
默认值9999,suggestion container的‘z-index’值
(14)appendTo
可选,指定suggestion要添加到的container,默认值是document.body,
(15)forceFixPosition
默认值false,当container是body时,suggestion是自动排放的,其它情况时,可以用来强制自动排放。
(16)orientation
默认值bottom,suggestion显示时的方向,可以是auto,top bottom
(17)preserverInput
默认值false,如果设置为true,在suggestion之间移动时不改变input值
(18)showNoSuggestionNotice
默认值false,当没有匹配结果时,是否显示一个提示标签。
(19)noSuggestionNotice
默认值No results,18中提示标签的内容
(20)onInvalidateSelectioin
可选, function(){}, 当已经选择了suggestion时触发的函数
(21)tabdisabled
默认值false,是否可以用tab键进行选择suggestion。
事件函数设置
(1)onSearchStart
function(params){}在ajax请求之前调用。
(2)onHint
function(hint){}用于自动把Input值设置为第一个suggestion
(3)onSearchComplete
function(query,suggest){},在处理ajax响应进调用
(4)transformResult
function(response,orginalQuery){},请求返回结果ok时调用,用于把result转化为response.suggestion
(5)onSelect
function(suggestion){},当用户选择suggestion时调用。
(6)onSearchError
function(query,jqXHR,textStatus,errorThrown){},如果ajax请求时失败时调用
(7)onHide
function(container){},在container隐藏前调用
本地设置
(1)lookupLimit
默认值no limit,本地显示结果的最大数目
(2)lookup
回调用函数
(3)suggestion
{value:'String',data:any}
(4)lookupFilter
function(suggestion,query,queryLowerCase){}
ajax设置
(1)serviceUrl
ajax请求url
(2)type
默认GET
(3)dataType
默认text
(4)paramName
(5)params
可选
(6)deferRequestBy0
推迟ajax请求的ms数
(7)ajaxSetting
可选
实例方法
(1)setoptions(options)
(2)clear
(3)clearCache
(4)disable
(5)enable
(6)hide
(7)dispose
关于谈谈Jquery ajax中success和complete有哪些不同点的介绍已经告一段落,感谢您的耐心阅读,如果想了解更多关于$.ajax({})方法success,error,complete,beforeSend使用例子及解释、$.ajax({})方法中的回调函数beforeSend,success,complete,error使用示例、$.ajax的beforeSend,success, complete,error例子、Ajax Autocomplete for jQuery 配置的相关信息,请在本站寻找。
本文标签: