Form Plugin API 里提供了很多有用的方法可以讓你輕松的處理表單里的數據和表單的提交過程。
測試環境：部署到Tomcat中的web項目。
一、ajaxForm() 介紹
ajaxForm預處理將要使用 AJAX 方式提交的表單，將所有需要用到的事件監聽器添加到其中。它不是提交這個表單。 在頁面的ready函數里使用ajaxForm來給你頁面上的表單做這些AJAX提交的准備工作。
ajaxForm 需要零個或一個參數。這唯一的一個參數可以是一個回調函數或者是一個可選參數對象。
是否可以連環調用: 是。
二、引入依賴的js
<script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"></script>
網盤下載：https://yunpan.cn/crjzfmXqaTu9e 訪問密碼 e3bc
三、編寫頁面
<form id="myForm" action="demo.jsp" method="post"> 名稱： <input type="text" name="name" /> <br/> 地址： <input type="text" name="address" /><br/> 自我介紹： <textarea name="comment"></textarea> <br/> <input type="submit" id="test" value="提交" /> <br/> <div id="output1" style="display:none;"></div> </form>
四、調用ajaxForm() 方法
<script type="text/javascript"> $(document).ready(function() { $('#myForm').ajaxForm(function() { $('#output1').html("提交成功！歡迎下次再來！").show(); }); }); </script>
五、詳細代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery Form插件例子-ajaxForm()</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.3.1.js" type="text/javascript"></script> <script src="jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#myForm').ajaxForm(function() { $('#output1').html("提交成功！歡迎下次再來！").show(); }); }); </script> </head> <body> <h3> Demo 1 : form插件的使用--ajaxForm(). </h3> <form id="myForm" action="demo.jsp" method="post"> 名稱： <input type="text" name="name" /> <br/> 地址： <input type="text" name="address" /><br/> 自我介紹： <textarea name="comment"></textarea> <br/> <input type="submit" id="test" value="提交" /> <br/> <div id="output1" style="display:none;"></div> </form> </body> </html>
六、編寫接收表單的測試代碼。demo.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); %>
七、效果如下：
