jQuery異步提交表單實例

更新時間：2017年05月30日 10:48:09 作者：xinghuo0007

這篇文章主要介紹了jQuery異步提交表單實例,需要的朋友可以參考下

前言：

我們在開發(fā)的時候，一定會使用ajax異步提交表單，在這里總結一下：

前提準備：引入腳本

 <!--jquery需要引入的文件-->
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <!--ajax提交表單需要引入jquery.form.js-->
  <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

前臺頁面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>Title</title>
  <!--jquery需要引入的文件-->
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <!--ajax提交表單需要引入jquery.form.js-->
  <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
  <script>
    $(function () {
      //給id為ajaxSubmit的按鈕提交表單
      $("#ajaxSubmit").on("click",function () {
        //alert(1);
        $("#ajaxForm").ajaxSubmit({
          beforeSubmit:function () {
            // alert("我在提交表單之前被調(diào)用！");
          },
          success:function (data) {
            //alert("我在提交表單成功之后被調(diào)用");
            if (typeof(data) == "string"){
              data = eval( '('+data+')');
              //alert(data); object
               handle(data);
            }else{
              handle(data);
            }
          }
        });
      });
    });
    //處理返回數(shù)據(jù)
    function handle(data){
      if(data.status == 200){
        alert(data.message);
        //處理邏輯
      }else{
        alert(data.message);
        //處理邏輯
      }
    }
  </script>
</head>
<body>
<form method="post" action="testAjax" id="ajaxForm">
  姓名：<input type="text" name="name"/><br>
  年齡：<input type="text" name="age"><br>
  性別：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
  <br><br><br>
  <input type="submit" value="同步提交"/> &nbsp;&nbsp;<input type="reset" value="重置" />
  <br> <br> <br>
  <input type="button" value="點我ajax提交表單" id="ajaxSubmit"/>&nbsp;&nbsp;
</form>
</body>
</html>

后臺servlet代碼：

package cn.cupcat.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestAJAXContorller extends HttpServlet{
  /**
   * 
   */
  private static final long serialVersionUID = 1L;
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    System.out.println("進入了doGet方法！");
    //調(diào)用都doPost方法，get和post做同樣處理
    doPost(req, resp);
  }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    System.out.println("進入了doPost方法！");
    //設置請求編碼
    req.setCharacterEncoding("UTF-8");
    //設置響應編碼
    resp.setCharacterEncoding("UTF-8");
    //得到表單中的name
    String name = req.getParameter("name");
    //得到表單中的age
    String age = req.getParameter("age");
    //得到表單中的sex
    String sex = req.getParameter("sex");
    //輸出打印
    System.out.println("name = "+name + " age = " + age +" sex = "+sex);
    String message = "name = "+name + " age = " + age +" sex = "+sex;
    //返回客戶端結果
    String result = getResponseResult(200,message);
    //將result返回客戶端
    resp.getWriter().print(result);
    //這里可以不用關閉 resp.getWriter()流，由容器負責管理
  }
  //這里為了簡單，沒有引入處理json的包，這是模擬json數(shù)據(jù)
  public static String getResponseResult(int status,String message){
    return "{status: "+status+",message: '"+message+"'}";
  }
}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 <display-name>upload_demo</display-name>
 <!--  測試ajax servlet開始 -->
 <servlet>
    <servlet-name>testAjax</servlet-name>
    <servlet-class>cn.cupcat.controller.TestAJAXContorller</servlet-class>
 </servlet>
 <servlet-mapping>
    <servlet-name>testAjax</servlet-name>
    <url-pattern>/testAjax</url-pattern>
 </servlet-mapping>
 <!-- 測試ajax servlet結束 -->
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.htm</welcome-file>
  <welcome-file>index.jsp</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
  <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
</web-app>

注意：

ajaxSubmit({})的也可以這樣設置表單的method、action、表單項

type: 'post', // 提交方式 get/post
 url: 'your url', // 需要提交的 url
 data: {
    'title': title,
    'content': content
  },
 success: function(data) { // data 保存提交后返回的數(shù)據(jù)，一般為 json 數(shù)據(jù)
  // 此處可對 data 作相關處理
        alert('提交成功！');
 }

以上所述是小編給大家介紹的jQuery異步提交表單實例，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: