jQuery异步提交表单实例

网络编程 2024/11/15 佚名

3 2 1

前言：

我们在开发的时候，一定会使用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,异步提交表单

标签：

jquery,异步提交表单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jQuery异步提交表单实例”

jQuery异步提交表单实例

暂无“jQuery异步提交表单实例”评论...

更新动态

2024年11月15日

jQuery异步提交表单实例

jquery,异步提交表单

JS给按钮添加跳转功能类似a标签

JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

评论“jQuery异步提交表单实例”

更新动态

友情链接