本文主要介紹了jQuery非同步提交表單實例,需要的朋友可以參考下，希望能幫助大家。
前言：
我們在開發的時候，一定會使用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+"/"; %>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("我在提交表单之前被调用！"); }, success:function (data) { //alert("我在提交表单成功之后被调用"); if (typeof(data) == "string"){ data = eval( '('+data+')'); //alert(data); object handle(data); }else{ handle(data); } } }); }); }); //处理返回数据 function handle(data){ if(data.status == 200){ alert(data.message); //处理逻辑 }else{ alert(data.message); //处理逻辑 } } </script>
後台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方法！");
//调用都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数据
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 保存提交后返回的数据，一般为 json 数据
// 此处可对 data 作相关处理
alert('提交成功！');
}相關推薦：
jquery下異步提交表單 非同步跨域提交表單_jquery
#Jquery.Form 非同步提交表單的簡單實例_jquery
#以上是jQuery異步提交表單實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
