时间:2021-05-25
定义和用法
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。
我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方 法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法 在之前的文章中已经出现过了,相信大家很快便能掌握。当然,本篇后半部分会对jQuery.ajax()方法做非常具体的说明,因为它是本篇的重中之重。
以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax().
1.load(url,[data],[callback])
载入远程HTML文件代码并插入至DOM中,默认使用GET方式,传递参数时自动转换为POST方式。
◦url:要载入的远程url地址
◦data:发送至服务器的key/value 数据
◦callback:载入成功时的回调函数
示例代码如下:
//无参数、无回调函数$("#showload").load("load.htm");//无回调函数$("#showload").load("load.htm", { "para": "para-value" });$("#showload").load("load.htm", { "para": "para-value" }, function() { //处理 })这里将显示加载的文件的内容Load
2.jQuery.get(url, [data], [callback])
使用get方式从服务器端获取数据。
◦发送请求的URL地址
◦要发送给服务器的数据
◦载入成功时回调函数
示例代码如下:
使用$.get()方法,通过传递id来获取不同的logo。值得一提的是,此时是通过get方法获得请求,所以在获取参数值时要使用Request.QueryString,可以看看Request Request.QueryString的区别
百度logo谷歌logo
这里将显示logo3.jQuery.post(url, [data], [callback])
使用POST方式来进行异步请求。同jQuery.get()相比,差别在于请求的方式,所以这里不做特别的说明了,使用方法同jQuery.get()相似。
4.jQuery.getScript(url,[callback])
通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过,也是jQuery.ajax的一种简单的使用方法,可以看看ajax加载js,所以在这里也不做特别的说明了。
5.jQuery.getJSON(url,[data],[callback])
通过get方式获取json格式的数据。
示例代码如下:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) { $.each(req.items, function(i, item) { if (i == vnum) { $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson"); } });});同样的,这也是jQuery.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-plete: function() { //请求完成的处理 }, error: function() { //请求出错处理 }});
使用jQuery.ajax()
这里将显示数据
$.ajax我的实际应用例子
//1.$.ajax带json数据的异步请求var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功!"); alert("修改成功!"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常!"); alert("异常!"); } });//2.$.ajax序列化表格内容为字符串的异步请求function noTips(){ var formParam = $("#form1").serialize();//序列化表格内容为字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的异步请求var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 { textPassword2.html("<font color='red'>业务密码不正确!</font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} });//4.$.ajax拼接data的异步请求$.ajax({ url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默认为true 异步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); }});本篇的jQuery ajax使用就总结到这里,当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等,在以后使用中,我会把它们也总结下来。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Jquery的$.ajax的用法:jQuery.ajax(options):通过HTTP请求加载远程数据,这个是jQuery的底层AJAX实现。简单易用的高层实
jQuery中把ajax封装得非常好。但是日常开发中,我偶尔还是会遇到ajax报错。这里简单分析一下ajax报错一般的jQuery用法如下,ajax通过post
详解闭包解决jQuery中AJAX的外部变量问题在AJAX中,我们经常都要使用外部变量,经常会多次使用,如下代码functiongetCarInfo(){for
本文实例讲述了jQuery中ajax的load()方法用法。分享给大家供大家参考。具体分析如下:此函数jQuery中简单而功能强大的ajax方法。它可以从服务器
本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考,具体如下:一、jQuery.Form.js插件的作用是实现Ajax提交表