|
jQuery和Form插件jQuery和Form插件
一、前言 <body> <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <textarea name="comment"></textarea> <input type="submit" value="提交评论" /> </form> </body>
2、引入jQuery和Form插件文件 <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript"> // 等待装入DOM $(document).ready(function() { // 绑定'myForm'并提供一个简单的回调函数 $('#myForm').ajaxForm(function() { alert("感谢你的评论！"); }); }); </script> </head> ...
就这样简单，当该表单被提交时，name和comment字段会被提交给comment.php文件进行处理，如果服务器返回成功状态，用户就会看到“感谢”信息。 $('#myFormId').ajaxForm();
ajaxSubmit // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // return false是为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？） return false; });
formSerialize var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString);
fieldSerialize var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]);
resetForm $('#myFormId').resetForm();
clearForm $('#myFormId').clearForm();
clearFields $('#myFormId .specialFields').clearFields();
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默认值：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。 // 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, xhr, $form) { // 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.'); }
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, xhr, $form) { // 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.'); }
表单校验 <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>
2、JavaSCript代码： // prepare the form when the DOM is ready $(document).ready(function() { // bind form using ajaxForm $('#myForm2').ajaxForm( { beforeSubmit: validate } ); });
注意其中的$('#myForm2').ajaxForm( { beforeSubmit: validate } );一句，这是指明进行Ajax提交前先进行表单输入校验。validate为校验回调函数。如果返回false，则终止Ajax提交。 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.'); }
4、验证方法二：利用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.'); }
5、验证方法三：利用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.'); }
处理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>
2、服务器端代码（json- echo.php）： <?php echo '{ message: "' . $_POST['message'] . '" }'; ?>
3、JavaScript代码（客户端）： // 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 }); });
4、回调函数processJson function processJson(data) { // 'data' is the json object returned from the server alert(data.message); }
处理responseXML数据 <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>
2、服务器端PHP代码： <?php // !!! IMPORTANT !!! - the server must set the content type to XML header('Content-type: text/xml'); echo '<root><message>' . $_POST['message'] . '</message></root>'; ?>
3、 JavaScript代码： // 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 }); });
4、回调函数（处理返回的XML数据）： 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); }
注意$().text()的用法，由于JQuery支持xpath，因此处理XML DOM文档非常简单方便。 <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>
2、服务器端PHP代码： <?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'); } }); });
注意：回调函数为一诺名函数，其对数据的显示加了一个JQuery的淡出特效。如果机器速度太快的话，效果并不明显。 原文写道：
This page demonstrates the Form Plugin's file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.
Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup. To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. The following response shows how a script should be returned from the server: <textarea> for (var i=0; i < 10; i++) { // do some processing } </textarea> The form below provides an input element of type "file" along with a select element to specify the dataType of the response. The form is submitted to files.php which uses the dataType to determine what type of response to return.
files.php <? $type = $_POST['mimetype']; $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; if ($type == 'xml') { header('Content-type: |