jQuery異步提交表單實例分享
本文主要介紹了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中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

jQuery中如何使用PUT請求方式?在jQuery中,發送PUT請求的方法與發送其他類型的請求類似,但需要注意一些細節和參數設定。 PUT請求通常用於更新資源,例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先,確保引入了jQuery庫文件,然後可以透過以下方式發送PUT請求:$.ajax({u

標題:jQuery小技巧:快速修改頁面所有a標籤的文字在網頁開發中,我們經常需要對頁面中的元素進行修改和操作。使用jQuery時,有時候需要一次修改頁面中所有a標籤的文字內容,這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本,同時給出具體的程式碼範例。首先,我們需要引入jQuery庫文件,確保在頁面中引入了以下程式碼:<

標題:使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫,被廣泛用於處理DOM操作。在網頁開發中,經常會遇到需要修改頁面上連結標籤(a標籤)的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標,並提供具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼:

jQuery如何移除元素的height屬性?在前端開發中,經常會遇到需要操作元素的高度屬性的需求。有時候,我們可能需要動態改變元素的高度,而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性,並提供具體的程式碼範例。在使用jQuery操作高度屬性之前,我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

jQuery是一種流行的JavaScript庫,被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中,eq()方法是用來選擇指定索引位置的元素的方法,具體使用方法和應用場景如下。在jQuery中,eq()方法選擇指定索引位置的元素。索引位置從0開始計數,即第一個元素的索引是0,第二個元素的索引是1,依此類推。 eq()方法的語法如下:$("s

在編寫網站或應用程式時,表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架,提供了豐富而強大的表單類,使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧,幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單,首先需要在檢視中編寫對應的HTML表單。在處理表單時,可以使用Laravel

jQuery是一個受歡迎的JavaScript函式庫,廣泛用於網頁開發。在網頁開發過程中,經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行,並提供具體的程式碼範例。首先,我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫:

如何判斷jQuery元素是否具有特定屬性?在使用jQuery操作DOM元素時,常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下,我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性,並附上具體的程式碼範例。方法一:使用attr()方法和typeof運算子//判斷元素是否具有特定屬
