快捷導(dǎo)航

jQuery ajaxForm()的應(yīng)用

更新時(shí)間：2016年10月14日 17:22:43 作者：souvc

Ajax在Web應(yīng)用中的作用越來越大，這讓采用AJAX方式提交一個(gè)表單的過程簡(jiǎn)單的不能再簡(jiǎn)單了，需要的朋友可以了解一下。

jQuery Form插件是一個(gè)優(yōu)秀的Ajax表單插件，可以非常容易地、無侵入地升級(jí)HTML表單以支持Ajax。提供了很多有用的方法可以讓你輕松的處理表單里的數(shù)據(jù)和表單的提交過程。本文就是介紹了ajaxForm()的應(yīng)用.

一、ajaxForm() 介紹

ajaxForm預(yù)處理將要使用 AJAX 方式提交的表單，將所有需要用到的事件監(jiān)聽器添加到其中。它不是提交這個(gè)表單。在頁面的ready函數(shù)里使用ajaxForm來給你頁面上的表單做這些AJAX提交的準(zhǔn)備工作。

ajaxForm 需要零個(gè)或一個(gè)參數(shù)。這唯一的一個(gè)參數(shù)可以是一個(gè)回調(diào)函數(shù)或者是一個(gè)可選參數(shù)對(duì)象。

是否可以連環(huán)調(diào)用: 是。

二、引入依賴的js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
 <script src="jquery.form.js" type="text/javascript"></script>

三、編寫頁面

<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>

四、調(diào)用ajaxForm() 方法

 <script type="text/javascript">     
  $(document).ready(function() { 
      $('#myForm').ajaxForm(function() {  
        $('#output1').html("提交成功！歡迎下次再來！").show();  
      });  
  });  
  </script>

五、詳細(xì)代碼如下：

<!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>

六、編寫接收表單的測(cè)試代碼。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);
%>

七、效果如下：