Ajax的方法以及表单提交
点击蓝字
jQuery的Ajax相关方法
虽然jQuery确实提供了很多与Ajax相关的便利方法，但核心的$.ajax()方法是所有方法的核心，了解它是必须的。我们先回顾一下它，然后再简单介绍一下便利方法。
通常认为，使用$.ajax()方法比jQuery提供的便利方法好。正如你所看到的，它提供了便利方法所没有的功能，而且它的语法也让人易于阅读。
$.ajax()
jQuery的核心$.ajax()方法是创建Ajax请求的一个强大而直接的方法。它需要一个配置对象，包含jQuery需要的所有指令来完成请求。$.ajax()方法特别有价值，因为它提供了指定成功和失败回调的能力。此外，它能够采取一个配置对象，可以单独定义，使其更容易编写可重用的代码。有关配置选项的完整文档，请访问http://api.jquery.com/jQuery.ajax/。
// Using the core $.ajax() method
$.ajax({
// The URL for the request
url: "post.php",
// The data to send (will be converted to a query string)
data: {
id: 123
},
// Whether this is a POST or GET request
type: "GET",
// The type of data we expect back
dataType : "json",
})
// Code to run if the request succeeds (is done);
// The response is passed to the function
.done(function( json ) {
$( "<h1>" ).text( json.title ).appendTo( "body" );
$( "<div class=\"content\">").html( json.html ).appendTo( "body" );
})
// Code to run if the request fails; the raw request and
// status codes are passed to the function
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
})
// Code to run regardless of success or failure;
.always(function( xhr, status ) {
alert( "The request is complete!" );
});
注意：关于dataType的设置，如果服务器发回的数据与你指定的格式不同，你的代码可能会失败，而且原因并不总是清楚，因为HTTP响应代码不会显示错误。在处理Ajax请求时，请确保你的服务器发回的是你要求的数据类型，并验证Content-type头对数据类型是否准确。例如，对于JSON数据，Content-type头应该是application/json。
$.ajax() Options
$.ajax()方法有很多很多的选项，这也是其强大的一部分。关于选项的完整列表，请访问http://api.jquery.com/jQuery.ajax/；这里有几个你会经常使用的选项。
async
如果请求应同步发送，设置为 "false"。默认值为 "true"。请注意，如果你把这个选项设置为 "false"，你的请求将阻止其他代码的执行，直到收到响应。
cache
是否使用缓存响应（如果可用）。除 "script "和 "jsonp "外，所有 "dataType "的默认值为 "true"。当设置为 "false "时，URL将简单地附加一个缓存参数。
done
请求成功后运行的回调函数。该函数接收响应数据（如果dataType是JSON，则转换为JavaScript对象），以及请求的文本状态和原始请求对象。
fail
如果请求出现错误，将运行回调函数。该函数接收原始请求对象和请求的文本状态。
always
一个回调函数，当请求完成时，无论成功或失败，都会运行。该函数接收原始请求对象和请求的文本状态。
context
回调函数应该运行的范围（即this在回调函数中的含义）。默认情况下，回调函数中的this指的是最初传递给$.ajax()的对象。
data
要发送给服务器的数据。可以是一个对象，也可以是一个查询字符串，如foo=bar&baz=bim。
dataType
你期望从服务器返回的数据类型。默认情况下，如果没有指定dataType，jQuery会看响应的MIME类型。
jsonp
JSONP请求时，在查询字符串中发送的回调名称。默认值为 "callback"。
timeout
在认为请求失败之前等待的时间，以毫秒为单位。
traditional
设置为 "true"，使用jQuery 1.4之前使用的param序列化样式。详情请见http://api.jquery.com/jQuery.param/。
type
请求的类型，"POST "或 "GET"。默认为 "GET"。可以使用其他请求类型，如 "PUT "和 "DELETE"，但它们可能不被所有浏览器支持。
url
请求的URL。
url选项是$.ajax()配置对象唯一需要的属性；其他所有属性都是可选的。这也可以作为$.ajax()的第一个参数，选项对象作为第二个参数。
Convenience Methods
如果你不需要$.ajax()广泛的可配置性，你也不关心处理错误，jQuery提供的Ajax便利函数可以是有用的，简洁的方式来完成Ajax请求。这些方法只是核心$.ajax()方法的 "包装器"，只是在$.ajax()方法上预设了一些选项。
jQuery提供的方便方法有：
$.get
对提供的URL执行GET请求。
$.post
对提供的URL执行POST请求。
$.getScript
在页面上添加一个脚本。
$.getJSON
执行一个GET请求，并期望返回JSON。
在每一种情况下，这些方法都依次使用以下参数：
url
请求的URL。必须填写。
data
要发送到服务器的数据。可选。可以是一个对象或查询字符串，如foo=bar&baz=bim。
注意：这个选项对$.getScript无效。
success callback
如果请求成功，要运行的回调函数。可选。该函数接收响应数据（如果数据类型为JSON，则转换为JavaScript对象），以及请求的文本状态和原始请求对象。
data type
您希望从服务器返回的数据类型。可选。
注意:这个选项只适用于没有在名称中指定数据类型的方法。
// Using jQuery's Ajax convenience methods
// Get plain text or HTML
$.get( "/users.php", {
userId: 1234
}, function( resp ) {
console.log( resp ); // server response
});
// Add a script to the page, then run a function defined in it
$.getScript( "/static/js/myScript.js", function() {
functionFromMyScript();
});
// Get JSON-formatted data from the server
$.getJSON( "/details.php", function( resp ) {
// Log each key in the response data
$.each( resp, function( key, value ) {
console.log( key + " : " + value );
});
});
$.fn.load
.load()方法在jQuery的Ajax方法中是独一无二的，它是在选择上调用的。.load()方法从一个URL中获取HTML，并使用返回的HTML来填充选定的元素。除了提供一个URL的方法，你可以选择提供一个选择器，jQuery将只从返回的HTML中获取匹配的内容。
// Using .load() to populate an element
$( "#newContent" ).load( "/foo.html" );
// Using .load() to populate an element based on a selector
$( "#newContent" ).load( "/foo.html #myDiv h1:first", function( html ) {
alert( "Content updated!" );
});
Ajax和表单
jQuery的ajax功能在处理表单时特别有用。有几个优点，可以从序列化，到简单的客户端验证(如 "对不起，该用户名已被占用")，到prefilters(下面解释)，甚至更多!
Serialization
在jQuery中序列化表单输入是非常容易的。原生支持两种方法。.serialize()和.serializeArray()。虽然名称相当不言自明，但使用它们有很多好处。
.serialize()方法将表单的数据序列化为一个查询字符串。为了使元素的值被序列化，它必须有一个name属性。请注意，来自 "checkbox "或 "radio "类型的输入值只有在被选中时才会被包含。
// Turning form data into a query string
$( "#myForm" ).serialize();
// Creates a query string like this:
// field_1=something&field2=somethingElse
虽然普通的序列化是伟大的，但有时你的应用程序将更好地工作，如果你发送一个对象数组，而不是只是查询字符串。对于这一点，jQuery有.serializeArray()方法。它和上面列出的.serialize()方法非常相似，只是它产生的是一个对象数组，而不是一个字符串。
// Creating an array of objects containing form data
$( "#myForm" ).serializeArray();
// Creates a structure like this:
// [
// {
// name : "field_1",
// value : "something"
// },
// {
// name : "field_2",
// value : "somethingElse"
// }
// ]
客户端验证
请注意，建议您也对您的输入进行服务器端验证。然而，通常情况下，如果能够在不提交表单的情况下验证一些东西，会有更好的用户体验。
说到这里，让我们跳到一些例子中去吧! 首先，我们将看到检查一个必填字段是否没有任何东西是多么容易。如果没有，那么我们将 "return false"，并阻止表单的处理。
// Using validation to check for the presence of an input
$( "#form" ).submit(function( event ) {
// If .required's value's length is zero
if ( $( ".required" ).val().length === 0 ) {
// Usually show some kind of error message here
// Prevent the form from submitting
event.preventDefault();
} else {
// Run $.ajax() here
}
});
// Validate a phone number field
$( "#form" ).submit(function( event ) {
var inputtedPhoneNumber = $( "#phone" ).val();
// Match only numbers
var phoneNumberRegex = /^\d*$/;
// If the phone number doesn't match the regex
if ( !phoneNumberRegex.test( inputtedPhoneNumber ) ) {
// Usually show some kind of error message here
// Prevent the form from submitting
event.preventDefault();
} else {
// Run $.ajax() here
}
});
预过滤
预过滤器是一种在每个请求发送之前修改ajax选项的方法（因此，名字叫prefilter）。
例如，我们想通过代理来修改所有的跨域请求。要做到这一点，使用预过滤器是非常简单的。
// Using a proxy with a prefilter
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
if ( options.crossDomain ) {
options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
});
你可以在回调函数前传入一个可选的参数，指定你希望预过滤应用于哪些dataTypes。例如，如果我们希望我们的预过滤器只适用于JSON和script请求，我们可以这样做。
// Using the optional dataTypes argument
$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
// Do all of the prefiltering here, but only for
// requests that indicate a dataType of "JSON" or "script"
});
GitHub｜简学Java