Ajax表单序列化serialize
这里servlet先准备个方法:
protected void jquerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html; charset=UTF-8");
System.out.println("用户名是:"+req.getParameter("username"));
System.out.println("密码是:"+req.getParameter("password"));
System.out.println("jqueryGetJson请求过来了");
Person person=new Person(1,"鹏哥");
// 需要先转成json格式的字符串
Gson gson =new Gson();
String s = gson.toJson(person);
resp.getWriter().write(s);
}
然后后在html里面写入:(主要看$("#submit").click(function(){// 把参数序列化)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/json_ajax/ajaxServlet",
data:"action=jqueryAjax",
type:"GET",
success:function (msg) {
$("#div_id").html("编号是:"+msg.id+"名字是:"+msg.name);
},
dataType:"json"
});
});
// ajax--get请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/json_ajax/ajaxServlet","action=jqueryGet",
function (msg) {
$("#div_id").html("编号是:"+msg.id+"名字是:"+msg.name);
},"json");
});
// ajax--post请求
$("#postBtn").click(function(){
// post请求
$.post("http://localhost:8080/json_ajax/ajaxServlet","action=jqueryPost",
function (msg) {
$("#div_id").html("编号是:"+msg.id+"名字是:"+msg.name);
},"json");
});
// ajax--getJson请求
$("#getJSONBtn").click(function(){
// 调用
$.getJSON("http://localhost:8080/json_ajax/ajaxServlet","action=jqueryPost",
function (msg) {
$("#div_id").html("编号是:"+msg.id+"名字是:"+msg.name);
});
});
// ajax请求
$("#submit").click(function(){
// 把参数序列化
alert($("#form01").serialize());
$.getJSON("http://localhost:8080/json_ajax/ajaxServlet","action=jquerySerialize&"+$("#form01").serialize(),
function (msg) {
$("#div_id").html("编号是:"+msg.id+"名字是:"+msg.name);
})
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax请求</button>
<button id="getBtn">$.get请求</button>
<button id="postBtn">$.post请求</button>
<button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="div_id"></div>
<br/><br/>
<form id="form01" >
用户名:<input name="username" type="text" /><br/>
密码:<input name="password" type="password" /><br/>
下拉单选:<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选:
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选:
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
单选:
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>