jQuery异步提交表单实例分享

来源：懂视网责编：小采时间：2020-11-27 20:06:46

jQuery异步提交表单实例分享

jQuery异步提交表单实例分享:本文主要介绍了jQuery异步提交表单实例,需要的朋友可以参考下，希望能帮助到大家。前言：我们在开发的时候，一定会使用ajax异步提交表单，在这里总结一下：前提准备：引入脚本  <script src="ht

推荐度：

点击下载本文 文档为doc格式

导读jQuery异步提交表单实例分享:本文主要介绍了jQuery异步提交表单实例,需要的朋友可以参考下，希望能帮助到大家。前言：我们在开发的时候，一定会使用ajax异步提交表单，在这里总结一下：前提准备：引入脚本  <script src="ht

本文主要介绍了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+"/";
%>
<!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("我在提交表单之前被调用！");
 },
 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>
</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="同步提交"/> <input type="reset" value="重置" />
 <br> <br> <br>
 <input type="button" value="点我ajax提交表单" id="ajaxSubmit"/> 
</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方法！");
 //调用都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异步提交表单实例分享

推荐度：

点击下载本文 文档为doc格式

标签：分享实例 jQuery

热门焦点

jQuery异步提交表单实例分享

jQuery异步提交表单实例分享

jQuery异步提交表单实例分享

最新推荐

猜你喜欢

热门推荐