前言:
我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:
前提准备:引入脚本
<!--jquery需要引入的文件--> <script src="/UploadFiles/2021-04-02/jquery-3.2.1.js">前台页面:
<%@ 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="/UploadFiles/2021-04-02/jquery-3.2.1.js">后台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配置
<"1.0" encoding="UTF-8""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,异步提交表单
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jQuery异步提交表单实例”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。