jQuery Ajax 全解析【.ajax .post .get】

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件,例如表单。

示例代码:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
		function (responseText, textStatus, XMLHttpRequest){
		this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]	
		//alert(responseText);//请求返回的内容
		//alert(textStatus);//请求状态:success,error
		//alert(XMLHttpRequest);//XMLHttpRequest对象
});

注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

参数:

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

		$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
				//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
				this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
				alert(data);
				//alert(textStatus);//请求状态:success,error等等。
                                  当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
				//alert(this);
		});

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

jQuery 代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
		function (data, textStatus){
			// data 可以是 xmlDoc, jsonObj, html, text, 等等.
			//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
			alert(data.result);
		}, "json");

如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地址。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

加载并执行 test.js。

jQuery 代码:

$.getScript("test.js");


加载并执行 AjaxEvent.js ,成功后显示信息。

jQuery 代码:

$.getScript("AjaxEvent.js", function(){
		alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");
});

加载完后请重新点击一下上面的 Load 请求看看有什么不同。

jQuery Ajax 事件

Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

 $.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ...
 });

全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

或者:

 $("#loading").ajaxStart(function(){
   $(this).show();
 }); 

我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

 $.ajax({
   url: "test.html",
   global: false,// 禁用全局Ajax事件.
   // ...
 });

  • 参数列表:


    参数名类型描述
    urlString(默认: 当前页地址) 发送请求的地址。
    typeString(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    asyncBoolean(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
    function (XMLHttpRequest) {
      this; // the options for this ajax request
    }
    cacheBoolean(默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
    completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
    function (XMLHttpRequest, textStatus) {
      this; // the options for this ajax request
    }
    contentTypeString(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
    dataObject,
    String
    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
    dataTypeString

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息;包含 script 元素。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

    "json": 返回 JSON 数据 。

    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    errorFunction(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
    function (XMLHttpRequest, textStatus, errorThrown) {
      // 通常情况下textStatus和errorThown只有其中一个有值 
      this; // the options for this ajax request
    }
    globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
    ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
    processDataBoolean(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
    successFunction请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
    function (data, textStatus) {
      // data could be xmlDoc, jsonObj, html, text, etc...
      this; // the options for this ajax request
    }

    这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
    请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。


    示例代码,获取博客园首页的文章题目:


    $.ajax({
    		type: "get",
    		url: "http://www.cnblogs.com/rss",
    		beforeSend: function(XMLHttpRequest){
    			//ShowLoading();
    		},
    		success: function(data, textStatus){
    			$(".ajax.ajaxResult").html("");
    			$("item",data).each(function(i, domEle){
    				$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
    			});
    		},
    		complete: function(XMLHttpRequest, textStatus){
    			//HideLoading();
    		},
    		error: function(){
    			//请求出错处理
    		}
    });

    其他

    jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。

    设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

    jQuery 代码:

    $.ajaxSetup({
      url: "/xmlhttp/",
      global: false,
      type: "POST"
    });
    $.ajax({ data: myData });

    serialize() 与 serializeArray()

    serialize() : 序列表表格内容为字符串。

    serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

    示例:

    HTML代码:

    <p id="results"><b>Results: </b> </p>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select><br/>
      <input type="checkbox" name="check" value="check1"/> check1
      <input type="checkbox" name="check" value="check2" 
    checked="checked"/> check2
      <input type="radio" name="radio" value="radio1" 
    checked="checked"/> radio1
      <input type="radio" name="radio" value="radio2"/> radio2
    </form> 

简单示例$.post与servlet交互

index.jsp
---------------------------------------
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function  onInvokeAction(){
$.post('url', {
    text: 'my string',
    number: 23
}, function(data) {
    $('#presidents').html(data);
});
}
</script>
</head>
<body onload="onInvokeAction()">
<input type="button"  value="12"  >
<div id="presidents"></div>
</body>
</html>

--------------------------------------------------------------
Ajax.java
-----------------------------------------------------


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Ajax extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                response.setContentType("text/html");
                PrintWriter out = response.getWriter();
                out.println(String.valueOf(System.currentTimeMillis()));
                out.flush();
                out.close();
        }                       
}
-----------------------------------------------------------

至此我们就实现了简单的AJAX功能简单说一下代码,jsp页面的js代码很少,是调用了jQuery lib 实现
<script type="text/javascript">
function  onInvokeAction(){
$.post('url', {//request提交方式,如果是post 那么就是 $.post ,'/Ajax'是处理请求的servlet映射路径,也可以是struts里面的 .do,如果是GET方式提交那么就是$.get('url?parameter1=value&parameter2=value……')

text: 'my string',//需要设定的参数,servlet处理的时候request.getParameter("test")得到的就是“my string”

number: 23//同上,多个参数提交的格式为{name1:value,name2:value,name3:value}

}, function(data) {//定义AJAX回调函数,传入从servlet返回的“data”
 
  $('#presidents').html(data);//查找CSS样式ID为presidents的元素并以html格式 用“data”替换掉,data可以是html代码,例如“<input type='button' value ='hahaha'>”
});
}
</script>

===============================================

标签: AJAX, servlet, jQuery

jQuery Div中加载其他页面的实现代码

代码如下:
<script type="text/javascript">
$(document).ready(function() {
loadPage("doc_view", "<?php echo $this->doc_view_url . '/flag/1'; ?>");
});
</script>
<?php
$p = new Portlet();
$p->setCaption("Document View")
->setShowBorder(false)
->addItem("<div id='doc_view'></div>") //这个DIv就是用来显示表单内容的容器
->render();
echo $this->partial("approval/CommentsList.phtml", array("approval_list" => $this->approval_list));
?>

第二步就是编写一段JavaScript用来获取表单页面,使用jQuery
复制代码 代码如下:
//动态加载页面
//id 显示页面的容器组件ID
//url 欲加载页面网址
function loadPage(id, url) {
$("#"+id).addClass("loader");
$("#"+id).append("Loading......");
$.ajax({
type: "get",
url: url,
cache: false,
error: function() {alert('加载页面' + url + '时出错!');},
success: function(msg) {
$("#"+id).empty().append(msg);
$("#"+id).removeClass("loader");
}
});
}
 

标签: jQuery, 加载

让Aptana支持jQuery

此demo将指导您如何创建一个新的jQuery的项目,并获得与您的编码开始使用jQuery库的记录由Aptana提供。


 

  1. Access your projects.访问您的项目。
    1. Click the Project tab to view your Aptana projects.单击项目选项卡查看您的Aptana项目。
  2. Create a new jQuery project.创建一个新的jQuery的项目。
    1. From the Aptana File menu, select New > Project...从Aptana 文件菜单,选择新建 “> 项目...
      The New Project wizard opens.新建项目向导。
    2. On the New Project wizard, expand the Aptana Projects folder and select General Web Project .新建项目向导中,展开Aptana项目文件夹并选择一般的Web项目
    3. Click the Next button.单击下一步按钮。
    4. In the Project name: field, type a name for your new project.项目名称:字段中,键入新项目的名称。
    5. Click the Next button.单击下一步按钮。
    6. From the Select Ajax Libraries list, check the box next to jQuery .选择Ajax库列表中,勾选扩展 jQuery。Click Next .单击下一步
    7. On the Jaxer Support screen, click the Select All button if you want to automatically add Jaxer support to the project.Jaxer支持屏幕上,单击全选按钮,如果你想自动添加Jaxer为了支持这个项目。Click Next .单击下一步
    8. On the HTML Preview settings page, configure any special HTML preview settings for your project.HTML预览设置页,配置任何特殊的HTML预览为您的项目设置。Click Next .单击下一步
    9. Click the Finish button.点击完成按钮。

      Aptana creates a new jQuery project, which includes a lib folder for the jQuery library, a new jQuery-linked HTML template file named jquery_sample.htm , and a new Code Assist Profile. Aptana创建一个新的jQuery的项目,其中包括一对jQuery库,一个新的jQuery的lib文件夹挂HTML模板文件名为jquery_sample.htm,一个新的代码辅助资料。

      Open the jquery_sample.htm file in the HTML Editor by double-clicking on it.打开通过双击上按一下,在HTML编辑器jquery_sample.htm文件。Because jquery_sample.htm is now the active file, your jQuery profile now becomes the active Profile in the Code Assist Profiles View.因为jquery_sample.htm现在是积极的文件,您的jQuery的文件现已成为在代码辅助配置文件察看活动配置。

  3. Explore the jQuery project.探索了jQuery项目。
    1. Just below the open jquery_sample.htm file in the Editor, click the Preview tab.下方,在编辑器,单击预览选项卡打开jquery_sample.htm文件。
      Aptana displays a preview of the Local Links example from jQuery. Aptana显示了本地连结从jQuery的例子预览。
    2. Click the Source tab to return to the source view of jquery_sample.htm .单击选项卡返回的jquery_sample.htm源视图。
    3. In the Project View, expand your project folder to view the files in your jQuery project.在项目视图中,展开您的项目文件夹,以查看您的jQuery的项目中的文件。
    4. In the Code Assist Profiles View, expand the jquery_sample.htm project folder to view the documented JQuery library files.在代码辅助配置文件察看,展开jquery_sample.htm项目文件夹以查看文件jQuery库文件。<p>These are the files that will be available to you in Code Assist. <p>这些都是文件将在代码辅助你。
  4. Preview Code Assist.预览代码辅助。
    1. In your jquery_sample.js file, just inside of the $(document).ready(function(){...}); function, add the following line: $("p") .在您的jquery_sample.js文件,只是里面的$(document).ready(function(){...});函数,添加下面一行$("p")
    2. While entering that selector you should have seen documentation come up for how to use the $ function.尽管进入该选择你应该看到的文件来如何使用$功能了。
    3. Now insert your cursor just after " $("p") " and type .ad and press ctrl+space .现在,插入仅次于$("p")并输入您的光标.ad和按Ctrl +空格
      Code Assist displays a list of jQuery functions that begin with the letters "ad" (eg add, addClass, etc).代码辅助显示一个jQuery函数列表字母开头的“广告”(如添加,addClass,等)。Use Code Assist to help you code.使用代码辅助,以帮助您的代码。
  5. Start coding.开始编码。
    1. As you type, notice that Code Assist is now active for the jQuery objects and functions that you use.当您输入,请注意,代码辅助目前正积极为jQuery对象和功能,您使用。
    2. Press ctrl+space at any time to activate Code Assist. Ctrl +在任何时间空间来激活代码辅助。

dreamweaver jquery--让Dreamweaver支持jquery

Dreamweaver也支持jQuery,安装插件后,会有自动提示功能。如下图所示:

 

效果可以吧,实现很简单,下载安装即可。

首先当然要先安装好Dreamweaver了。

在装有Extension Manager的前提下,在dreamweaver中依次选择“命令”->“扩展管理”->“安装扩展”->“选择插件包”

dreamweaver jquery--让Dreamweaver支持jquery

插件下载地址:

http://img.namipan.com/downfile/354325ddd9d5a3320823b474c89b18e1bee82a16304c0300/JQuery%20MX-9%20v.0.2.9.rar

jquery表单验证插件

Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。

1、JQuery框架软件包下载

文件:jquery.rar
大小:29KB
下载:下载


2、Form插件下载

文件:jquery.form.rar
大小:7KB
下载:下载




3、Form插件的简单入门
第一步:先增加一个表单

 

<formid="myForm"action="comment.php"method="post">
     Name:<inputtype="text"name="name"/>
     Comment:<textareaname="comment"></textarea>
     <inputtype="submit"value="Submit Comment"/>
</form>

第二步:jquery.js和form.js文件的包含

<head>
     <scripttype="text/javascript"src="path/to/jquery.js"></script>
     <scripttype="text/javascript"src="path/to/form.js"></script>
      <scripttype="text/javascript">
         
// wait for the DOM to be loaded
          $(document).ready(function(){
             
// bind 'myForm' and provide a simple callback function
          $('#myForm').ajaxForm(function(){
                 alert("Thank you for your comment!");
             });
         });
     </script>
</head>



============================
该插件的作者在介绍form.js时,说了这样的一句话:

Submitting a form with AJAX doesn't get any easier than this!

 

表单插件API


英文原文:
http://www.malsup.com/jquery/form/#api

表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm

增 加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为 AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

实例:


$('#myFormId').ajaxForm();


ajaxSubmit

马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

实例:
// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
    // 提交表单
    $(this).ajaxSubmit();
    // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false
    return false;
   });


formSerialize

将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2
可链接(Chainable):不能, 这个方法返回一个字符串。

实例:
var queryString = $('#myFormId').formSerialize();

// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

fieldSerialize

将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2
可链接(Chainable):不能,这个方法返回一个字符串。

实例:
var queryString = $('#myFormId .specialFields').fieldSerialize();


fieldValue

返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。
可链接(Chainable):不能,该方法返回数组。

实例:
// 取得密码输入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);


resetForm

通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
可链接(Chainable):可以。

实例:
$('#myFormId').resetForm();


clearForm

清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。
可链接(Chainable):可以。

$('#myFormId').clearForm();


clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。
可链接(Chainable):可以。

$('#myFormId .specialFields').clearFields();


Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。

url

指定提交表单数据的URL。
默认值:表单的action属性值

type

指定提交表单数据的方法(method):“GET”或“POST”。
默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit

表 单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数 据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]


默认值:null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:

'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。

'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script', 服务器响应将求值成纯文本。


默认值:null(服务器返回responseText值)

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布 尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了 type="image"的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将 semantic设置为true。(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。)
默认值:false

resetForm

布尔标志,表示如果表单提交成功是否进行重置。
Default value: null

clearForm

布尔标志,表示如果表单提交成功是否清除表单数据。
默认值:null

实例:

// 准备好Options对象
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success: function() {
      alert('Thanks for your comment!');
    } };

   // 将options传给ajaxForm
$('#myForm').ajaxForm(options);


注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。