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异步提交表单实例，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关推荐
-
jQuery异步提交表单的两种方式
本文为大家分享了两种jQuery异步提交表单的方式,具体内容如下 第一种方式:普通ajax方式提交 $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: GLOBAL_PATH + "/Enterprise/savecompanyphoto", data: {username:$("#username").val(), content:$("#cont
-
jquery下异步提交表单 异步跨域提交表单
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l
-
Jquery异步提交表单代码分享
功能很实用代码也很简单,就不多废话了,直接奉上: $.ajax({ url:"mobileSurveyAction_addSurvey.action",//提交地址 data:$("#form1").serialize(),//将表单数据序列化 type:"POST", dataType:"json", success:function(result){ if (result.success == '100'){ $(&quo
-
Jquery.Form 异步提交表单的简单实例
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: 复制代码 代码如下: <form id="myForm" method="post" action="/Home/AjaxForm"><div>Name:<input id="username&qu
-
JQuery异步提交表单与文件上传功能示例
本文实例讲述了JQuery异步提交表单与文件上传功能.分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件. 示例如下: index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"
-
jquery.form.js异步提交表单详解
本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">
-
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&q
-
纯javascript的ajax实现php异步提交表单的简单实例
很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam
-
使用ajax异步提交表单的几种方法总结
这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor
-
ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp
-
jQuery实现提交表单时不提交隐藏div中input的方法
本文实例讲述了jQuery实现提交表单时不提交隐藏div中input的方法.分享给大家供大家参考,具体如下: 今天做一个功能 想在下拉列表中根据下拉的选项隐藏对应的div有个平台选择的下拉列表,我想在选择pc的时候出现水平以下的内容并且提交水平线以下的input下拉列表选择app的时候会隐藏水平线以下的input,但这时候不想提交隐藏div的input的值,这时候在隐藏div的时候就需要做以下操作 function choosePlatform(platform) { if(platform =