JQueryAjax教程讲解

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（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请求的⽅法，可以很⽅便我们的对后台异步请求处理。

$.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详解目录(?)[-]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 请求载入信息。

- 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篇⼩试了下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;>。

JQuery中$.ajax（）⽅法参数详解jqueryajax传递参数url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求⽅式（post或get）默认为get。

注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。

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

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

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

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

cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。

设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。

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

get请求中将附加在url后。

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

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

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

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

dataType: 要求为String类型的参数，预期服务器返回的数据类型。

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

可⽤的类型如下：xml：返回XML⽂档，可⽤JQuery处理。

jquery中ajax的用法
jQuery中的Ajax可以让我们在不刷新整个页面的情况下，与服务器端进行数据的交互。

我们可以使用Ajax来获取数据、保存数据、更新数据等。

jQuery中通过$.ajax()方法来实现Ajax的请求。

其中，我们需要指定请求地址、请求方式、数据类型等参数。

基本语法如下：
$.ajax({
url: 请求地址,
type: 请求方式,
dataType: 数据类型,
data: 发送到服务器的数据,
success: 成功后执行的函数,
error: 失败时执行的函数
});
其中，url参数表示请求的地址；type参数表示请求的方式，可以是GET或POST；dataType参数表示要求返回数据的类型，可以是json、xml、text等；data参数表示要发送到服务器的数据。

success参数表示请求成功后要执行的函数，可以在函数中处理返回的数据；error参数表示请求失败后要执行的函数，可以在函数中提示用户或进行其他操作。

除了基本的$.ajax()方法外，jQuery还提供了$.get()、$.post()
等方法来简化Ajax的操作，这些方法的使用方式和$.ajax()类似。

总之，jQuery中的Ajax可以让我们在Web开发中更加方便地与服务器端进行数据交互，提高了网页的交互性和用户体验。