<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://www.jb51.net/jquery-1.3.1.js" type="text/javascript"></script> <script src="https://www.jb51.net/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var options = { target: '#output1', // 用服务器返回的数据 更新 id为output1的内容. beforeSubmit: showRequest, // 提交前 success: showResponse, // 提交后 //另外的一些属性: //url: url // 默认是form的action，如果写的话，会覆盖from的action. //type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post'). //dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) //clearForm: true // 成功提交后，清除所有的表单元素的值. resetForm: true // 成功提交后，重置所有的表单元素的值. //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间, //当请求大于3秒后，跳出请求. //timeout: 3000 }; //'ajaxForm' 方式的表单 . $('#myForm').ajaxForm(options); //或者 'ajaxSubmit' 方式的提交. //$('#myForm').submit(function() { // $(this).ajaxSubmit(options); // return false; //来阻止浏览器提交. //}); }); // 提交前 function showRequest(formData, jqForm, options) { // formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串. var queryString = $.param(formData); //组装数据，插件会自动提交数据 alert(queryString); //类似 ： name=1&add=2 return true; } // 提交后 function showResponse(responseText, statusText) { alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); } </script> </head> <body> <h3> Demo 4 : jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </h3> <!-- demo1 --> <form action="ajax2.jsp" method="post"> 名称： <input type="text" /> <br/> 地址： <input type="text" /><br/> 自我介绍： <textarea></textarea> <br/> <input type="submit" value="提交" /> <br/> <div ></div> </form> </body> </html>
新建一个ajax2.jsp文件：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8");//防止乱码! String name = request.getParameter("name"); String address = request.getParameter("address"); String comment = request.getParameter("comment"); System.out.println(name + " - " +address + " - " +comment); out.println(name + " " +address + " " +comment); %>
五、测试效果：
填写数据：
提交表单的内容：
从服务器返回的数据：
以上内容是小编给大家分享的jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象的全部叙述，希望本文分享对大家有所帮助。
您可能感兴趣的文章: