jQuery如何实现异步提交表单

这篇文章主要为大家展示了“jQuery如何实现异步提交表单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现异步提交表单”这篇文章吧。

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站制作、卢氏网络推广、微信小程序、卢氏网络营销、卢氏企业策划、卢氏品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供卢氏建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com

前言:

我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:

前提准备:引入脚本

 
  
  
  

前台页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
  " rel="external nofollow" >
  Title
  
  
  
  
  



  姓名:
  年龄:
  性别:男  女 
  


        
 
 
    

后台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配置



 upload_demo
 
 
    testAjax
    cn.cupcat.controller.TestAJAXContorller
 
 
    testAjax
    /testAjax
 
 
 
  index.html
  index.htm
  index.jsp
  default.html
  default.htm
  default.jsp
 

注意:

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如何实现异步提交表单
文章转载:http://azwzsj.com/article/pihppj.html