JQueryAjax教程讲解

合集下载

jQueryajax培训教程1

jQueryajax培训教程1
});
节点操作
$(‘ul li’).click(function(){ //复制当前单击的节点,并将其追加到<ul>元素中 $(this).clone().appendTo(“ul”);//
});
节点操作
2.2 样式操作
$(function() { var x = 10, y = 10; //使用XPath选择器依据title属性选择<a>元素 $('a[title]').mouseover(function(e) { //this在jQuery中指当前获取的对象,此例中是<a>元素
1.3 选择器
$(document).ready(function() { $('.emp tr:odd').addClass('odd'); //添加交替行背景色 $('.emp tr:even').addClass('even'); $('td:contains("gmail")').addClass('highlight'); //高亮显示email中有gmail的文本 //为表格行绑定事件,使用jQuery的链式语法连续绑定两个事件到同一个对象 $('.emp tr').mouseover(function() { $(this).addClass('alt'); }).mouseout(function() { $(this).removeClass('alt'); });
XPath选择器
通过属性来选择元素
1.3 选择器
$(funct$i(o‘n元()素{ 名[XPath属性选择表达式]’)

jquery中$.ajax()方法使用详解

jquery中$.ajax()方法使用详解

jquery中$.ajax()⽅法使⽤详解1.url说明:发送请求的地址(默认为当前页⾯),要求是String类型的参数,⽐如是.net下,"~wexin(控制器)/getweinxinmenu(动作)",2.type说明:请求⽅法(post或者get),默认是get,要求是String类型的参数。

其他的htpp请求如(put、delete)等也⽀持,但是要浏览器⽀持3.timeout说明:设置请求超时时间(毫秒),要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明:默认值为true,所有请求是异步,要求是Bool类型的参数,如果需要发送同步请求,将此项设置为false。

注意:同步时浏览器会被锁住。

5.cache说明:默认为true(当datatype为script时,默认为false)从浏览器缓存中加载请求信息,要求是Bool类型的参数。

6.data说明:发送到服务器的数据,要求是Object或string类型的参数。

如果已经不是字符串,将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换,可以查看 processData选项。

对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组,JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明:预期服务器返回的数据类型,要求为String类型的参数。

如果不指定,JQuery将⾃动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。

jquery中ajax用法

jquery中ajax用法

jquery中ajax用法详解在jQuery中,Ajax(Asynchronous JavaScript and XML)是一种用于在不刷新整个页面的情况下进行异步通信的技术。

它可以通过在后台与服务器进行数据交换,使页面能够异步更新,提升用户体验。

以下是jQuery中Ajax的基本用法详解:1. 基本语法:```javascript$.ajax({url: 'your_url', // 请求的URLmethod: 'GET', // 请求方法(GET、POST等)dataType: 'json', // 期望的数据类型(json、xml、html等)data: { // 发送到服务器的数据key1: 'value1',key2: 'value2'},success: function(response) { // 请求成功时的回调函数// 处理成功返回的数据},error: function(xhr, status, error) { // 请求失败时的回调函数// 处理错误}});```2. 选项说明:- url: 发送请求的URL。

- method: 请求方法,例如'GET' 或'POST'。

- dataType: 期望的响应数据类型,常用的有'json'、'xml'、'html'。

- data: 发送到服务器的数据,可以是对象、字符串或数组。

- success: 请求成功时的回调函数,处理返回的数据。

- error: 请求失败时的回调函数,处理错误信息。

3. 简化的语法:可以使用`$.get()` 和`$.post()` 方法来简化GET和POST请求:```javascript// GET请求$.get('your_url', { key1: 'value1', key2: 'value2' }, function(response) {// 处理成功返回的数据// POST请求$.post('your_url', { key1: 'value1', key2: 'value2' }, function(response) { // 处理成功返回的数据});```4. 常见用法:发送FormData对象:```javascriptvar formData = new FormData($('form')[0]);$.ajax({url: 'your_url',method: 'POST',processData: false, // 不处理数据contentType: false, // 不设置内容类型data: formData,success: function(response) {// 处理成功返回的数据},error: function(xhr, status, error) {// 处理错误}});```JSONP跨域请求:```javascript$.ajax({url: 'your_url',dataType: 'jsonp',success: function(response) {// 处理成功返回的数据},error: function(xhr, status, error) {// 处理错误}});```5. Promise接口:`$.ajax()` 也返回一个Promise对象,可以使用`.done()`、`.fail()`、`.always()` 方法处理成功、失败和总是执行的回调函数:```javascript$.ajax({url: 'your_url',method: 'GET'}).done(function(response) {// 处理成功返回的数据}).fail(function(xhr, status, error) {// 处理错误}).always(function() {// 总是执行的代码});```以上是一些基本的jQuery Ajax用法,根据实际需求,你可以根据需要使用这些选项和方法进行配置和处理。

jQuery的ajax详解

jQuery的ajax详解

jQuery的ajax详解jQuery内部也封装了对原⽣ajax请求的⽅法,可以很⽅便我们的对后台异步请求处理。

$.get()⽅法语法:jQuery.get( url [, data ] [, success ] [, dataType ] )url 请求的后台地址data 传递的参数success 成功的回调, function(PlainObject data, String textStatus, jqXHR jqXHR )dataType 预期后台返回数据的类型,默认会⾃动智能判断(xml, json, script, text, html)$.get('/user.json', function(data) {console.log(data);});$.get('/user.json', 'id=1', function (data, status, jsXHR) {console.log(data.id);}, 'json');$.post()⽅法语法: jQuery.post( url [, data ] [, success ] [, dataType ] )⽤法跟get基本⼀致。

列⼦:$.post('/api/user', {id: 3, name: 234}, function(data, status, jsXHR) {console.log(data);});$.ajax()⽅法语法1:jQuery.ajax( [settings ] )settings 是⼀个普通的对象。

可以有如下设置:async 类型:Boolean默认值: true。

默认设置下,所有请求均为异步请求。

如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,⽤户其它操作必须等待请求完成才可以执⾏。

JQuery中的AJAX详解

JQuery中的AJAX详解

JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据,格式为key/valuecallback格式为:function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态:success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。

如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass",则表示获取jsp页面中类名为filterClass的全部元素3.{4. name :clf, age : 255.//经测试,变量名加引号、单引号、不加引号,后台都能取到值6.//如果含有中文,必须用encodeURI()进行编码,然后再服务器端用decodeURI()解码即可,如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值,{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态("success","notmodified", "error", "timeout" 或"parsererror")通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型:"xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。

jQuery精品教程资料:4-使用jQuery处理Ajax

jQuery精品教程资料:4-使用jQuery处理Ajax

描述
可选,AJAX 请求设置,所有选项都是可选的 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送 同步请求,请将此选项设置为 false 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面 发送到服务器的数据
缺点
ie10以下不支持(可以用XDR实现)
演示示例03:跨域解决方案1
28/36
跨域解决方案4-2
jsonp
动态创建script标签,使用jQuery的jsonp请求
优点
兼容性强&不受同源策略的限制
缺点
只能用get方法,不能使用post方法
演示示例04:跨域解决方案2
29/36
跨域解决方案4-3
7/36
HTTP协议-GET和PO制 对数据类型的限 制 安全性 可见性
GET
POST
能被缓存
不能缓存
application/x-www-form-urlencoded 或 application/x-www-form-urlencoded multipart/form-data。为二进制数据使用
}else{var oAjax=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 }
演示示例01:ajax操作
11/36
连接到服务器
open(方法,文件名,同步异步)
参数一:post/get 参数二:请求的文件名 参数三:同步(false) 异步(true)
$.post() 方法
通过 HTTP POST 请求从服务器上请求数据

jQuery类库新手使用指南之AJAX方法

jQuery类库新手使用指南之AJAX方法

- AJAX来提供流畅并且高效的用户体验。

无论是出名的Google Maps还是Gmail,或者是流行的jav as cr ip t框架-jQuery Mobile,都使用AJAX来获取后台数据,并且实时更新用户浏览页面。

使用javascript代码来构建一个AJAX应用可能需要技巧。

但是,很多的javascript类库,包括jQuery都已经内建支持AJAX,这样使得开发一个AJAX驱动的网站或者应用变得非常简单。

在这个教程中,我们将学习使用jQuery来执行基本的AJAX请求操作。

你将会学习:1.AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?2.如何使用jQuery来调用各种AJAX请求3.使用AJAX请求来发送数据4.处理服务器端的AJAX请求,获取返回的数据5.如何自定义jQuery的AJAX处理及其参数设置6.AJAX的高级使用注意:本文主要介绍javascript端的使用,如何你需要了解后台,请参考你所使用的语言。

AJAX是什么?工作原理是什么?为什么AJAX是一个好东西?简单说,AJAX是一个帮助你的浏览器和服务器异步通讯的javascript技巧。

是AsynchronousJavaScript And XML的缩写,和传统的web编程比较来说,他们有如下区别:1.传统方式的web页面处理包含了链接和表单,当用户点击或者发送,将会对服务器进行一次请求调用。

然后服务器会通过返回整个页面来响应,然后浏览器负责显示页面内容,替换开始的页面。

这个过程可能非常的耗时间,往往会让用户的使用体验大打折扣,因为用户可能得花很多时间来等待页面加载2.使用AJAX方式,javascript代码会向服务器请求一个URL,同时也可以发送数据。

javascript代码然后处理服务器的响应,然后对应做处理。

例如,可能计算返回的数据,添加或者更新页面上的组件,或者通知用户服务器端数据的变化等因为AJAX的请求往往在后台发生,用户在阅读网页的时候,javascript代码可以继续在后台工作。

jquery框架使用教程AJAX篇

jquery框架使用教程AJAX篇

jquery框架使⽤教程AJAX篇⼩试了下AJAX,感觉⽐prototype简洁多了,在JQuery中,AJAX有三种实现⽅式:$.ajax(),$.post,$.get()。

XHTML(主要):<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div><form id="formtest" action="" method="post"><p><span>输⼊姓名:</span><input type="text" name="username" id="input1" /></p><p><span>输⼊年龄:</span><input type="text" name="age" id="input2" /></p><p><span>输⼊性别:</span><input type="text" name="sex" id="input3" /></p><p><span>输⼊⼯作:</span><input type="text" name="job" id="input4" /></p></form><button id="send_ajax">提交</button><button id="test_post">POST提交</button><button id="test_get">GET提交</button>JS:1、引⼊jquery框架:<script type="text/javascript" src="../js/jquery.js"></script>2、构建AJAX,JQUERY的好处是不需要在XHTML中使⽤JS代码来触发事件了,可以直接封装在JS⽂件中:<script type="text/javascript">//$.ajax()⽅式$(document).ready(function (){$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,⽽不需要混在XHTML中了var params=$('input').serialize(); //序列化表单的值,与prototype中的form.serialize()相同$.ajax({url :'ajax_test.php', //后台处理程序type:'post', //数据发送⽅式dataType:'json', //接受数据格式data:params, //要传递的数据success:update_page //回传函数(这⾥是函数名)});});});function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseTextvar str="姓名:"+ername+"<br />";str+="年龄:"+json.age+"<br />";str+="性别:"+json.sex+"<br />";str+="⼯作:"+json.job;$("#result").html(str);}//$.post()⽅式:$(function (){ //$(document).ready(function (){ 的简写$('#test_post').click(function (){$.post('ajax_test.php',{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},function (data){ //回传函数var myjson='';eval('myjson='+data+';');$('#result').html("姓名:"+ername+"<br />⼯作:"+myjson['job']);});});});//$.get()⽅式:$(function (){$('#test_get').click(function (){$.get('ajax_test.php',{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},function (data) {var myjson='';eval("myjson="+data+";");$("#result").html(myjson.job);});});});</script>PHP代码:<?php$arr=$_POST; //若以$.get()⽅式发送数据,则要改成$_GET.或者⼲脆:$_REQUEST $myjson=json_encode($arr);echo $myjson;>。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求失败时显示信息。 jQuery 代码: $("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>"); });
Softeem Consultancy Service
JQuery_Ajax
Softeem Consultancy Service
Ajax请求
通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情 况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意:此行以后的代码将在这个回调函数执行前执行。 返回值 XMLHttpRequest 参数 url (String) : 发送请求地址。 data (Map) : (可选) 待发送 Key/value 参数。 callback (Function) : (可选) 载入成功时回调函数。
Softeem Consultancy Service
Softeem Consultancy Service
Ajax事件
ajaxComplete(callback) AJAX 请求完成时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求完成时执行函数。 jQuery 代码: $("#msg").ajaxComplete(function(request, settings){
Ajax_getScript
jQuery.getScript(url,[callback]) 通过 HTTP GET 请求载入并执行一个 JavaScript 文 件。 jQuery 1.2 版本之前,getScript 只能调用同域 JS 文 件。 1.2中,您可以跨域调用 JavaScript 文件。注意: Safari 2 或更早的版本不能在全局作用域中同步执行 脚本。如果通过 getScript 加入脚本,请加入延时函 数。 返回值
XMLHttpRequest 参数 url (String) : 待载入 JS 文件地址。 callback (Function) : (可选) 成功载入后回调函数。
Softeem Consultancy Service
Ajax_Post
jQuery.post(url,[data],[callback]) 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行 函数,请使用 $.ajax。 返回值 XMLHttpRequest 参数 url (String) : 发送请求地址。 data (Map) : (可选) 待发送 Key/value 参数。 callback (Function) : (可选) 发送成功时回调函数。
Softeem Consultancy Service
Ajax请求设置
async (Boolean) : (默认: true) 默认设置下,所有请 求均为异步请求。如果需要发送同步请求,请将此选 项设置为 false。注意,同步请求将锁住浏览器,用户 其它操作必须等待请求完成才可以执行。
beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax Event.
Softeem Consultancy Service
Ajax_getJson
jQuery.getJSON(url,[data],[callback]) 通过 HTTP GET 请求载入 JSON 数据。 在 jQuery 1.2 中,您可以跨域加载 JSON 数据。使用 JSONP 形 式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为 正确的函数名,以执行回调函数。
Softeem Consultancy Service
Ajax请求设置
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) : 请求成功后回调函数。参数:服务器返回 数据,数据格式。 Ajax 事件。 timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖 全局设置。 type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url (String) : (默认: 当前页地址) 发送请求的地址。
jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类 型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以 执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调 用回调函数。
cache (Boolean) : (默认: true) jQuery 1.2 新功能, 设置为 false 将不会从浏览器缓存中加载请求信息。
complete (Function) : 请求完成后回调函数 (请求成 功或失败时均调用)。参数: XMLHttpRequest 对象, 成功信息字符串。 Ajax vice
Ajax_Load
load(url,[data],[callback]) 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。 jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档, DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。 返回值 jQuery 参数 url (String) : 待装入 HTML 网页网址。 data (Map) : (可选) 发送至服务器的 key/value 数据。 callback (Callback) : (可选) 载入成功时回调函数。 示例 加载文章侧边栏导航部分至一个无序列表。
$(this).append("<li>Request Complete.</li>"); });
Softeem Consultancy Service
Ajax事件
ajaxError(callback) AJAX 请求发生错误时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到 的错误可作为最后一个参数传递。 返回值
Softeem Consultancy Service
Ajax请求设置
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 对象,错误信息,(可能)捕获的错误对象。Ajax 事件
相关文档
最新文档