在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
标签：至少1个，最多5个
表单元素转JSON
自定义一个函数
$.fn.serializeObject = function()
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
o[this.name].push(this.value || '');
o[this.name] = this.value || '';
ajax提交表单
type : "POST",
url : "rest/role/new",
dataType : "json",
data : $("#form_add_roleRecord").serializeObject(),
success : function(data) {
alert("成功");
error : function(data) {
alert("失败");
console.log(data);
java后台接收
我的后台使用了spring mvc
public class Role {
private String roleN
private String roleS
public Long getId() {
public void setId(Long id) {
public String getRoleName() {
return roleN
public void setRoleName(String roleName) {
this.roleName = roleName == null ? null : roleName.trim();
public String getRoleSign() {
return roleS
public void setRoleSign(String roleSign) {
this.roleSign = roleSign == null ? null : roleSign.trim();
public String getDescription() {
public void setDescription(String description) {
this.description = description == null ? null : description.trim();
public String toString() {
return "Role [id=" + id + ", roleName=" + roleName + ", roleSign=" + roleSign + ", description=" + description + "]";
@Controller
@RequestMapping(value = "/role")
public class RoleController {
@RequestMapping(value = "/new", method = RequestMethod.POST, produces = { "application/charset=UTF-8" })
@ResponseBody
public String newRecord(Role role, HttpServletRequest request) {
System.out.println(role.toString());
} catch (Exception e) {
e.printStackTrace();
return "{\"success\":\"true\"}";
Role [id=null, roleName=testaa, roleSign=user:create, description=]
1 收藏&&|&&4
你可能感兴趣的文章
1 收藏，216
26 收藏，9.2k
2 收藏，670
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：博客分类：
本文为学习笔记，属新手文章，欢迎指教！！
本文主要是比较三种实现Ajax的方式，为以后的学习开个头。
prototype.js
jquery1.3.2.min.js
后台处理程序(Servlet),访问路径servlet/testAjax:
package ajax.
import java.io.IOE
import java.io.PrintW
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
* Ajax例子后台处理程序
* @author bing
* @version
public class TestAjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/charset=utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}");
out.print("{\"name\":\"" + name + "\",\"age\":" + age + "}");
out.flush();
out.close();
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
TestAjaxServlet接收两个参数：name和age，并返回一个以JSON格式编写的字符串。
前台页面参数输入界面:
&div id="show"&显示区域&/div&
&div id="parameters"&
name:&input id="name" name="name" type="text" /&&br /&
age:&input id="age" name="age" type="text" /&&br /&
一、prototype实现
&script type="text/javascript" src="prototype.js"&&/script&
&script type="text/javascript"&
function prototypeAjax()
var url = "servlet/testAjax";//请求URL
var params = Form.serialize("parameters");//提交的表单
var myAjax = new Ajax.Request(
method:"post",// 请求方式
parameters:params, // 参数
onComplete:pressResponse, // 响应函数
asynchronous:true
$("show").innerHTML = "正在处理中...";
function pressResponse(request)
var obj = request.responseT // 以文本方式接收
$("show").innerHTML =
var objJson = request.responseText.evalJSON(); // 将接收的文本用解析成Json格式
$("show").innerHTML += "name=" + objJson['name'] + " age=" + objJson['age'];
&input id="submit" type="button" value="提交" onclick="prototypeAjax()" /&&br /&
在prototype的Ajax实现中，用evalJSON方法将字符串转换成JSON对象。
二、jquery实现
&script type="text/javascript" src="jquery-1.3.2.min.js"&&/script&
&script type="text/javascript" src="json2.js"&&/script&
&input id="submit" type="button" value="提交" /&&br /&
&script type="text/javascript"&
function jqueryAjax()
var user={"name":"","age":""};
user.name= $("#name").val();
user.age=$("#age").val();
var time = new Date();
url: "servlet/testAjax?time="+time,
data: "name="+user.name+"&age="+user.age,
datatype: "json",//请求页面返回的数据类型
type: "GET",
contentType: "application/json",//注意请求页面的contentType 要于此处保持一致
success:function(data) {//这里的data是由请求页面返回的数据
var dataJson = JSON.parse(data); // 使用json2.js中的parse方法将data转换成json格式
$("#show").html("data=" + data + " name="+dataJson.name+"
age=" + dataJson.age);
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#show").html("error");
$("#submit").bind("click",jqueryAjax); // 绑定提交按钮
刚接触jQuery,在json的处理上借助了json2.js。还请前辈们指教。。
三、XMLHttpRequest实现
&script type="text/javascript"&
function XMLHttpRequestAjax()
// 获取数据
var name = document.getElementById("name").
var age = document.getElementById("age").
// 获取XMLHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
var activxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0 ; i & activexName. i++){
xmlhttp = new ActiveXObject(activexName[i]);
}catch(e){}
xmlhttp.onreadystatechange =
//回调函数
var time = new Date();// 在url后加上时间，使得每次请求不一样
var url = "servlet/testAjax?name="+name+"&age="+age+"&time="+
xmlhttp.open("GET",url,true); // 以get方式发送请求
xmlhttp.send(null);
// 参数已在url中，所以此处不需要参送
function callback(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){ // 响应成功
var responseText = xmlhttp.responseT
// 以文本方式接收响应信息
var userdiv = document.getElementById("show");
var responseTextJson = JSON.parse(responseText); // 使用json2.js中的parse方法将data转换成json格式
userdiv.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.
&input id="submit" type="button" value="提交" onclick="XMLHttpRequestAjax()" /&&br /&
XMLHttpRequest的实现在json的处理上同样的也借助于json2.js。
下载次数: 137
浏览 41298
浏览: 114190 次
来自: 深圳
u 写道u 写道你的tot ...
u 写道你的total是如何获取到的啊？新手 ...
你的total是如何获取到的啊？
总结得很好！
谢谢博主。
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'jQuery通过ajax获得后台json数据给form表单赋值
jQuery提供了load方法可以将数据加载到页面form表单中，但有时候我需要获取后台json数据中某个值时，又需要赋值整个form表单，load方法没有回调函数所以就不行了，如果用ajax调用的话，获得后台json数据后把json数据分析出来在一个个的赋值到form表单的每个文本框中，这样未免太过复杂和太多代码，所以我根据了一些大神的回答，总结了一个很好用的jQuery函数。
jQuery-load方法调用：
$('#form').form('load',URL);
页面表单：
总结的方法：
页面调用：
$.getJSON(URL,param,function(data){
alert(data.type);
$("form").setForm(data);
把下面这段代码放入到jQuery中取
$.fn.setForm = function(jsonValue) {
alert("setForm");
$.each(jsonValue, function (name, ival) {
var $oinput = obj.find("input:[name=" + name + "]");
if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){
$oinput.each(function(){
if(Object.prototype.toString.apply(ival) == '[object Array]'){//是复选框，并且是数组
for(var i=0;i<ival.i++){
if($(this).val()==ival[i])
$(this).attr("checked", "checked");
if($(this).val()==ival)
$(this).attr("checked", "checked");
}else if($oinput.attr("type")== "textarea"){//多行文本框
obj.find("[name="+name+"]").html(ival);
obj.find("[name="+name+"]").val(ival);
注意页面启动ajax方法，然后这样就可以通过ajax拿到自己想要的&#20540;，又可以将&#20540;全部赋&#20540;到form表单中了。
看了之后有木有感觉很有爱啊。jquery ajax
serialize()
转json 数据,post
后台 - CSDN博客
jquery ajax
serialize()
转json 数据,post
$(&.submit&).click(function (){
$.ajaxSetup({
& &contentType: &application/x-www-form- charset=utf-8&
var DataDeal = {
& & & & & formToJson: function (data) {
& & & & & & & data=data.replace(/&/g,&\&,\&&);
& & & & & & & data=data.replace(/=/g,&\&:\&&);
& & & & & & & data=&{\&&&#43;data&#43;&\&}&;
& & & & & & &
& & & & & &},
var &userId =
$('.userId').val();
var data =$(&#addUserAddressJson&).serialize();//获取&#20540;
data= decodeURIComponent(data,true);//防止中文乱码
var json=DataDeal.formToJson(data);//转化为json
var &url = &${ctx}/address/addUserAddressJson&;
type : &POST&,
url : url,
dataType : &text&,
contentType : &application/json&,
data :json,
success : function(data) {
if(data== &fail&){
& & & & & & & window.location.href = &${ctx}/login?url=& &#43;
& & & & & & }
if (data== &success&) {
window.location.href = &${ctx}/address/getAddressList?userId=&&#43;userId;
& &error: function(XMLHttpRequest, textStatus, errorThrown) {
& & & & & & & & alert(XMLHttpRequest.status);
& & & & & & & & alert(XMLHttpRequest.readyState);
& & & & & & & & alert(textStatus);
& & & & & & }
本文已收录于以下专栏：
相关文章推荐
Serialize an HTML Form to a JavaScript Object, supporting
nested attributes and arrays.
项目地址htt...
做web前端开发时，需要ajax提交大量表单数据，如果一个个form字段拼接很费劲也容易出错，下面方法可解决这个问题
jquery form序列化转换为json对象
首先是页面
此页面时一个表单
只要是选中的数据，就往后台传，没选中但是有数据，则不传递。此页面的代码如下
$(document).ready(function(){
$(&#modifyForm&).submit(function(e){
$(&#submitButton&).attr(...
原装的方法真的一点都不好用，所以我在我的引用文件里面扩展了jQuery的方法，可以直接用var obj = $(&#form&).parseForm();变成json对象，然后直接扔给后台。
将form表单里的数据封装成json对象即object，在后台中用usr就能接收全部参数了。可适用于strts2，easyUI的DataGrid 传参等
需要引用的js库有jquery 和 &#160;json...
form 转json最佳示例
博客以Demo的形式讲诉拦截器的使用
项目结构如图：
需要的jar：有springMVC配置需要的jar和jstl需要的jar
SpringMVC包的作用说明：
...
在做jsp系统时，有时候会有群发消息或及时推送消息的功能，如果用ajax请求，设置settimeout不断的请求服务器会给浏览器造成很大的压力，这时就可以用dwr技术进行消息推送。dwr根据自身的机制...
jQuery是在web应用中使用的脚本语言之一，因其具有轻量级,易学易用等特点，已广泛应用，其中的ajax封装简化了我们的应用，对其表单数据序列化用如下方法：
1.serialize()方法
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)