Jquery.form.js的使用

前言：

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

•  

前提准备：引入脚本

前台页面：

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



    
    
    
    
    

    
    

    




    姓名：

    年龄：


    性别：男  女 


    



       
    
 
 

      

后台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('提交成功！');
 }