ajax提交form表单 jQuery ajax - serialize() 方法

最新推荐文章于 2022-02-23 20:00:00 发布

maojd

最新推荐文章于 2022-02-23 20:00:00 发布

阅读量6.8k

点赞数 2

分类专栏： JavaScript jquery 文章标签： jquery ajax

本文链接：https://blog.csdn.net/mao1055229269/article/details/18260497

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
<title>ajax提交form表单</title>


</head>
<body>
<form id="form1">
  <div><input type="text" name="a" value="11111a" id="a" /></div>
  <div><input type="text" name="b" value="2bbbb" id="b" /></div>
  <div><input type="hidden" name="c" value="3 ccc" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4dddd</textarea>
  </div>
  <div><select name="e">
    <option value="5值是5" selected="selected">5选择框5</option>
    <option value="6值是6">6选择可值是6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="我是checkbox" id="f" />
  </div>
  <div>
    <!-- <input type="submit" name="g" value="Submit" id="g" /> -->
  </div>
</form>

<!-- <input type="button" value="测试用ajax提交表单" οnclick="ajaxForm()"> -->
<input type="button" value="ajax" οnclick="ajaxForm()">
</body>
</html>

<script type="text/javascript">

function ajaxForm(){
	//alert($('#form1').serialize());//a=11111a&b=2+name+%3D+b&c=3+name+%3D+c&d=4+name+%3D+d&e=5&f=%E6%88%91%E6%98%AFcheckbox
	//document.write($('#form1').serialize());
	$.ajax({
		type:"POST",
		async:false,//异步请求  默认为true,设置为false的话,suncess之后，才会继续执行  下面的js
		//data:"name="+123,
		data:$('#form1').serialize(),// 你的formid
		url:"${pageContext.request.contextPath}/ajaxFormServlet",
		success:function(msg){
			alert(msg);
		},
		error:function(msg){
			alert(msg);
		}
		
	});
	alert(123);
}

</script>

ajax的async默认为true,异步请求的意思。

为了测试这个属性才加上的，加上之后的结果就是服务器端返回来 msg之后，才alert(123);

去掉这个属性，会是先alert(123); 再alert(msg);

servlet接收：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxForm
 */
public class AjaxForm extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String a = request.getParameter("a");
		String b = request.getParameter("b");
		String c = request.getParameter("c");
		String d = request.getParameter("d");
		String e = request.getParameter("e");
		String f = request.getParameter("f");
	
		System.out.println("a:"+a+"     b:"+b+"     c:"+c+"     d:"+d+"       e:"+e+"        f:"+f);
		
		response.setContentType("text/html;charset=utf-8");
		//response.getWriter().print("获取成功");   
		PrintWriter pw = null;
		try {
			pw = response.getWriter();
			//pw.print("获取到的值处理完成，并返回");
			pw.write("获取到的值处理完成，并返回");
		} catch (Exception e1) {
			e1.printStackTrace();
		}finally{
			if(pw != null){
				pw.close();
			}
		}
		
		
	}

}

maojd

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
ajax提交form表单 jQuery ajax - serialize() 方法

html代码：ajax提交form表单 4dddd 5选择框5 6选择可值是6 7 --> -->function ajaxForm(){ //alert($('#
复制链接

扫一扫