`
friendsys
  • 浏览: 347774 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

jQuery And Ajax

阅读更多

load(): 最为简单和常用的Ajax方法,能加载远程HTML代码,并插入Dom中.
结构为:load(url,[data],[callback]),分别为地址,参数与回调函数.

其中load方法,是属于jQuery对象上的,也就是常用的jQuery对象都可以直接调用这个方法
如:$(".context").load("o.html") //其中context为一个class="context"的div

被加载的内容,会自动使用主页面的样式

使用load可以筛选加载进来的页面的内容,与URL参数一起书写,格式如下
url selector

如:$(".resText").load("o.html .pare"),这样只会加载class为pare的内容

参数传递:如果参数为空,则使用get方法,否则自动转换成Post,格式使用JSON
$(".resText").load("o.html .pare",{name:"cc",age:"30"})

回调函数,包括了三个参数,分别为:请求返回的内容,请求状态,XMLHttpRequest对象

$.get()方法和$.post()方法
load常用于读取静态文件,get和post可以进行更复杂的操作

$get()方法: 参数列表 $.get(url [,data] [,callback] [,type]),其中四项都是可选的
参数中的data也是以Json的形式进行参数的传递

get的回调函数只有两个参数,分别是返回的内容和请求状态.

第四个参数为type,返回的数据格式,包括HTML XML JSON等
$.get()方法传输的数据,一般限制在2k

$.post()方法, 使用的参数形式与get相同,在使用load()时,只要带上参数,默认也是用post方式传输数据

$.getScript() 方法,用于异步加载Js文件,类似jsonp的方式,通过创建一个<script>进行添加,jQuery进行了更便于使用
的封装: $.getScript('test.js')

$.getJSON()方法,异步加载JSON文件,与上面方法不同,会使用事件的机制通知加载完成并访问加载的数据
$.getJSON('text.json',function(data){...}),data就可以如同普通的json变量一样使用,可以使用jsonp来加载其他
网站的json数据

$.each(),可以用于遍历对象和数组,不同于jQuery对象的each方法.将一个对象或者数组作为第一个参数,第二个参数
为回调函数,该函数将有2个参数,第一个为对象的成员或者索引,第二个则为对应的变量或者内容(1:key 2:value)

在上述异步方法中,可以直接在url中使用?callback=函数名,来指定回调函数

$.ajax() jQuery中最底层的Ajax实现
结构为 $.ajax(options),只有一个参数,这个对象包含该方法所需要的请求设置和回调函数等信息,参数以key/value(json)
的形式存在,所有参数都是可选的

常用的参数有:
url 请求的地址
type 请求的方法POST或者GET,默认为GET
timout 超时的毫秒数,将覆盖掉$.ajaxSetup()的全局设置
data 发送到服务端的字符串,会自动转换成字符串的形式
dataType预期服务端返回的数据类型,不指定则根据HTTP包MIME信息返回的参数指定,可用的有xml,html,script,json,jsonp
text
beforeSend 发送请求前自动运行的函数名,可以修改XMLHttpRequest对象(作为参数传入)
complete请求完成后调用的回调函数,成功和失败都会调用,参数为一个XMLHttpRequest和一个textStatus
success 请求成功后调用的回调函数,传入两个参数,1:返回的内容 2:描述状态的字符串
error 请求失败后的回调函数,3个参数:1:XMLHttpRequest对象,2:错误信息 3:捕获的错误对象
global  布尔值,默认为true,表示将会触发全局Ajax事件

jQuery的serialize()方法,用于将jQuery对象进行序列化,自动生成对应的&的URL形式,并且自动对中文转码,
注意需要是表单元素(并不一定需要有form),并且需要拥有name属性
单选框和复选框也可以序列化成字符串形式,只会选中的值序列化

serilizeArray()方法,该方法返回JSON,而不是字符串

$.param()方法,用于将一个数组或JSON对象,转换成字符串的形式进行序列化(&)

全局的Ajax事件,用于对所有的Ajax请求.提供必要的公用接口
可以为指定的元素添加公共的Ajax请求监听,该事件为全局的,其他元素调用后,同样也会触发该方法,不知是否唯一..
如: $("#loading").ajaxStart(function(){...})

还包括其他的Ajax事件
ajaxStop 请求结束
ajaxComplete 请求完成
ajaxError 请求错误
ajaxSend Ajax请求前
ajaxSuccess Ajax请求成功后

可以通过单独的$.ajax 避开这些事件

















分享到:
评论

相关推荐

    Upload Image with Auto Submit using PHP, JQuery and Ajax.zip

    "Upload Image with Auto Submit using PHP, JQuery and Ajax" 这个标题指出我们要探讨的是一个基于Web的图像上传功能,该功能利用PHP作为服务器端处理语言,JQuery作为客户端JavaScript库,以及Ajax技术实现无刷新...

    基于jQuery的Ajax聊天室程序

    Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。在这个聊天室程序中,jQuery库被用来简化Ajax的使用,使得开发者能更轻松地实现这一功能。 1. **jQuery**:...

    jquery,ajax的几个小例子

    Ajax(Asynchronous JavaScript and XML)则是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。在jQuery中,Ajax功能被封装得十分友好,使得开发者可以轻松地实现异步数据交换。 **一、jQuery中的Ajax...

    jQuery-ajax-用户名异步请求

    Ajax,即Asynchronous JavaScript and XML,允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中,我们可能是在设计一个...

    Asp.Net MVC之jQuery与AJAX操作实例

    AJAX(Asynchronous JavaScript and XML)并非一种新技术,而是多种技术的组合,包括JavaScript、XML、HTML和CSS等。其核心是通过JavaScript创建XMLHttpRequest对象,实现后台与服务器的异步通信。在Asp.Net MVC中,...

    jquery,jquery是Ajax的一个框架

    jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了前端开发中的许多任务,尤其是处理 AJAX(Asynchronous JavaScript and XML)请求。AJAX 是一种在不刷新整个网页的情况下,允许部分网页内容异步更新的技术。...

    jQuery的Ajax实现异步传输List、Map

    Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交换,极大地提升了用户体验。本话题将深入探讨如何使用jQuery的Ajax功能实现异步传输List和Map类型的数据,同时涉及...

    Struts2+Jquery+Ajax

    Ajax(Asynchronous JavaScript and XML)技术允许前端与后台进行异步通信,无需整个页面刷新,提高了用户体验。在Struts2框架下,我们可以使用Jquery的Ajax方法向服务器发送请求,获取JSON或XML数据,然后动态更新...

    jQuery+ajax实现三级级联

    ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在三级级联中,每当用户在一级或二级下拉菜单中做出选择时,会通过ajax发送异步请求到服务器,...

    Jquery和ajax结合使用的小例子

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术,而jQuery是一个轻量级的JavaScript库,简化了JavaScript的使用,同时也提供了对Ajax操作的强大支持。...

    jquery+AJAX小小项目

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使得网页实现异步更新,提高了用户体验。 **三、jQuery与AJAX...

    jquery upload ajax方式

    Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 ### 2. HTML表单基础 首先,我们需要一个包含`&lt;input type="file"&gt;`的...

    jquery+ajax的视频讲解

    AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这为用户提供了更流畅的体验,因为页面无需完全刷新就能响应用户的...

    jQuery_AJAX网页系统

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。在用户体验上,这种技术使得网页更加动态...

    Ajax里jQuery的ajax与ssh集成

    在IT行业中,Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下更新部分网页的技术,极大地提升了用户体验。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理、动画...

    php+jquery+ajax最简单例子

    3. Ajax(Asynchronous JavaScript and XML):虽然名字中包含XML,但现在的Ajax更多的是处理JSON格式的数据。它允许网页在不刷新整个页面的情况下,通过JavaScript向服务器发送异步请求,获取并更新部分页面内容,...

    jquery 的ajax用法

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交互,极大地提升了用户体验。jQuery库简化了JavaScript中的Ajax操作,使得开发者能够更方便地实现异步...

    PHP-JQuery-Ajax-json

    3. **Ajax(Asynchronous JavaScript and XML)**: Ajax不是一种单一的技术,而是一种利用JavaScript进行异步数据交换的技术,使得页面无需刷新就能更新部分内容。jQuery库包含了对Ajax的支持,简化了Ajax请求的...

    jquery+ajax分页

    2. **AJAX简介**:AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使得网页实现异步更新。 **二、jQuery +...

Global site tag (gtag.js) - Google Analytics