腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

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

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

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

jQuery Form插件是一個(gè)優(yōu)秀的Ajax表單插件，可以非常容易地、無侵入地升級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ù)對象。

是否可以連環(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>

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

七、效果如下：