下面这个控制HTML表单的代码就是基于这个方法的。它使用ajaxForm 绑定这个表单，然后演示如何使用表单提交之前和之后的回调函数。

// prepare the form when the DOM is ready
$(document).ready(function() {
    var options = {
        target:        '#output1',   // target element(s) to be updated with server response
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback

        // other available options:
        //url:       url         // override for form's 'action' attribute
        //type:      type        // 'get' or 'post', override for form's 'method' attribute
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
        //clearForm: true        // clear all form fields after successful submit
        //resetForm: true        // reset the form after successful submit

        // $.ajax options can be used here too, for example:
        //timeout:   3000
    };

    // bind form using 'ajaxForm'
    $('#myForm1').ajaxForm(options);
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
    // formData is an array; here we use $.param to convert it to a string to display it
    // but the form plugin does this for you automatically when it submits the data
    var queryString = $.param(formData);

    // jqForm is a jQuery object encapsulating the form element.  To access the
    // DOM element for the form do this:
    // var formElement = jqForm[0];

    alert('About to submit: \n\n' + queryString);

    // here we could return false to prevent the form from being submitted;
    // returning anything other than false will allow the form submit to continue
    return true;
}

// post-submit callback
function showResponse(responseText, statusText)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object's responseText property

    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to 'xml' then the first argument to the success callback
    // is the XMLHttpRequest object's responseXML property

    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to 'json' then the first argument to the success callback
    // is the json data object returned by the server

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
}

输出 Div (#output1):

下面的用于控制HTML表单的代码就是基于这个用法的。它使用 ajaxSubmit 来提交这个表单。

// prepare the form when the DOM is ready
$(document).ready(function() {
    var options = {
        target:        '#output2',   // target element(s) to be updated with server response
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback

        // other available options:
        //url:       url         // override for form's 'action' attribute
        //type:      type        // 'get' or 'post', override for form's 'method' attribute
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
        //clearForm: true        // clear all form fields after successful submit
        //resetForm: true        // reset the form after successful submit

        // $.ajax options can be used here too, for example:
        //timeout:   3000
    };

    // bind to the form's submit event
    $('#myForm2').submit(function() {
        // inside event callbacks 'this' is the DOM element so we first
        // wrap it in a jQuery object and then invoke ajaxSubmit
        $(this).ajaxSubmit(options);

        // !!! Important !!!
        // always return false to prevent standard browser submit and page navigation
        return false;
    });
});

// pre-submit callback
function showRequest(formData, jqForm, options) {
    // formData is an array; here we use $.param to convert it to a string to display it
    // but the form plugin does this for you automatically when it submits the data
    var queryString = $.param(formData);

    // jqForm is a jQuery object encapsulating the form element.  To access the
    // DOM element for the form do this:
    // var formElement = jqForm[0];

    alert('About to submit: \n\n' + queryString);

    // here we could return false to prevent the form from being submitted;
    // returning anything other than false will allow the form submit to continue
    return true;
}

// post-submit callback
function showResponse(responseText, statusText)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object's responseText property

    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'xml' then the first argument to the success callback
    // is the XMLHttpRequest object's responseXML property

    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'json' then the first argument to the success callback
    // is the json data object returned by the server

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
}

输出 Div (#output2):

这个页面提供了几个例子，用来在表单提交到server之前校验其数据的合法性。让它起作用的一句就是 beforeSubmit 参数。如果提交之前执行的回调函数返回false，表单的提交将会终止。

下面的这个登录表单会在随后的几个例子中用到。每个例子都校验用户填入的用户名和密码。

表单代码:

<form id="validationForm" action="dummy.php" method="post">
    Username: <input type="text" name="username" />

    Password: <input type="password" name="password" />
    <input type="submit" value="Submit" />
</form>

首先，我们初始化这个表单，给它一个 beforeSubmit 回调函数 - 这是一个用来校验的函数。

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('#myForm2').ajaxForm( { beforeSubmit: validate } );
});

使用 formData 参数校验表单

function validate(formData, jqForm, options) {
    // formData is an array of objects representing the name and value of each field
    // that will be sent to the server;  it takes the following form:
    //
    // [
    //     { name:  username, value: valueOfUsernameInput },
    //     { name:  password, value: valueOfPasswordInput }
    // ]
    //
    // To validate, we can examine the contents of this array to see if the
    // username and password fields have values.  If either value evaluates
    // to false then we return false from this method.

    for (var i=0; i < formData.length; i++) {
        if (!formData[i].value) {
            alert('Please enter a value for both Username and Password');
            return false;
        }
    }
    alert('Both fields contain values.');
}

使用 jqForm 参数校验表单

function validate(formData, jqForm, options) {
    // jqForm is a jQuery object which wraps the form DOM element
    //
    // To validate, we can access the DOM elements directly and return true
    // only if the values of both the username and password fields evaluate
    // to true

    var form = jqForm[0];
    if (!form.username.value || !form.password.value) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
    alert('Both fields contain values.');
}

使用 fieldValue 方法校验表单

function validate(formData, jqForm, options) {
    // fieldValue is a Form Plugin method that can be invoked to find the
    // current value of a field
    //
    // To validate, we can capture the values of both the username and password
    // fields and return true only if both evaluate to true

    var usernameValue = $('input[@name=username]').fieldValue();
    var passwordValue = $('input[@name=password]').fieldValue();

    // usernameValue and passwordValue are arrays but we can do simple
    // "not" tests to see if the arrays are empty
    if (!usernameValue[0] || !passwordValue[0]) {
        alert('Please enter a value for both Username and Password');
        return false;
    }
    alert('Both fields contain values.');
}

注意

这个页面展示如何处理server返回的JSON数据。

下面的例子是表单向server提交一段文本，server端将它以JSON格式返回。
表单代码：

<form id="jsonForm" action="json-echo.php" method="post">
    Message: <input type="text" name="message" value="Hello JSON" />
    <input type="submit" value="Echo as JSON" />
</form>

<?php  echo '{ message: "' . $_POST['message'] . '" }';  ?>

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('#jsonForm').ajaxForm({
        // dataType identifies the expected content type of the server response
        dataType:  'json',

        // success identifies the function to invoke when the server response
        // has been received
        success:   processJson
    });
});

function processJson(data) {
    // 'data' is the json object returned from the server
    alert(data.message);
}

这个页面展示如何处理server返回的HTML数据。

下面的例子里表单向server提交一条文本信息，server将它放在div里以HTML形式将它返回。返回的数据将被添加到这个页面上 htmlExampleTarget div 里。
表单代码：

<form id="htmlForm" action="html-echo.php" method="post">
    Message: <input type="text" name="message" value="Hello HTML" />
    <input type="submit" value="Echo as HTML" />

</form>

<?php
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>';
?>

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('#htmlForm').ajaxForm({
        // target identifies the element(s) to update with the server response
        target: '#htmlExampleTarget',

        // success identifies the function to invoke when the server response
        // has been received; here we apply a fade-in effect to the new content
        success: function() {
            $('#htmlExampleTarget').fadeIn('slow');
        }
    });
});

htmlExampleTarget (输出的信息将会被加到下面):

这个页面展示如何处理server返回的 XML 数据。

下面的例子里表单向server提交一条文本信息，server将它以 XML 形式返回。
表单代码：

<form id="xmlForm" action="xml-echo.php" method="post">
    Message: <input type="text" name="message" value="Hello XML" />
    <input type="submit" value="Echo as XML" />

</form>

<?php
// !!! IMPORTANT !!! - the server must set the content type to XML
header('Content-type: text/xml');
echo '<root><message>' . $_POST['message'] . '</message></root>';
?>

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('#xmlForm').ajaxForm({
        // dataType identifies the expected content type of the server response
        dataType:  'xml',

        // success identifies the function to invoke when the server response
        // has been received
        success:   processXml
    });
});

function processXml(responseXML) {
    // 'responseXML' is the XML document returned by the server; we use
    // jQuery to extract the content of the message node from the XML doc
    var message = $('message', responseXML).text();
    alert(message);
}

这个页面将要展示这个表单插件如何处理上传文件的功能。不需要什么特别的代码来处理文件上传。文件上传域会被自动的检测到，自动的为你做好所需要的一切。

因为使用浏览器的XMLHttpRequest对象是不可能上传文件的，这个表单插件使用了一个隐藏的iframe来完成这个工作。这是个常用的技巧，但它有一些固有的限制。这个iframe是当做表单提交的target目标的，也就意味着server返回的响应数据都会被写到这个iframe里。 如果server返回的数据是HTML 或 XML^[1]形式的，这是没问题的，但当返回的数据类型是 script 或 JSON 时, 这两种形式的数据一般都需要处理一下然后利用页面上一些HTML代码来重新展示。

考虑到处理 script 和 JSON 类响应的困难，这个插件允许你把这些响应代码嵌入到 textarea 元素里而且我们推荐当表单中有上传域时你使用这种方法’ 然而，请注意, 如果这个上传域里没有提供值，那么表单将会按常规的 XHR 方式提交(不使用iframe)。这就需要server端代码去判断何时使用textarea，何时不使用textarea。如果你喜欢，你可以一直按iframe方式处理。 插件有个选项可以使它强制一直使用 iframe 模式 而你的server端代码就可以一直使用在textarea里嵌入响应代码的形式。 下面的就是一个从server端返回的一个script代码的示例：

<textarea>
    for (var i=0; i < 10; i++) {
        // do some processing
    }
</textarea>

下面的表单里有一个文件上传域和一个用来指示选择返回类型的下拉选项。 表单将提交到 files.php里，这个php文件根据 dataType 来决定返回的响应数据的格式类型。

输出: