ajax-form表单快速传递参数

serialize()方法序列化表单内容为字符串,用于Ajax请求

当表单中要提交的参数比较多时,就可以使用该方法进行提交当表单中要提交的参数比较多时,就可以使用该方法进行提交

function update_PTInfo() {var formatter = $("#update_frm").serialize();$.ajax({type: "POST",url: "/pt-sts/updateUserInfo",data: formatter,dataType: "json",success: function(result){console.log(result.msg);console.log(result);}});
};

方法一：controller后台接受，和普通接受参数一样

异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。

//修改个人信息
@ResponseBody
@RequestMapping(value = "updateUserInfo")
public Map<String, Object> updateUserInfo(User user,HttpServletRequest request){Map<String,Object> resultMap = new HashMap<>();String user_name = request.getParameter("user_name");String user_sex = request.getParameter("user_sex");System.out.println("账号=="+user_name);System.out.println("单选框=="+user_sex);System.out.println("当前对象："+user);resultMap.put("code",001);resultMap.put("msg","SUCCESS");resultMap.put("data",user);return resultMap;
}

方法二：另外一种写法

JSON.toJSONString是将对象转化为Json字符串返回

//修改个人信息
@ResponseBody
@RequestMapping(value = "updateUserInfo")
public String updateUserInfo(User user,HttpServletRequest request){Map<String,Object> resultMap = new HashMap<>();String user_name = request.getParameter("user_name");String user_sex = request.getParameter("user_sex");System.out.println("账号=="+user_name);System.out.println("单选框=="+user_sex);System.out.println("当前对象："+user);resultMap.put("code",001);resultMap.put("msg","SUCCESS");resultMap.put("data",user);return JSON.toJSONString(resultMap); //将对象转化为json字符串
}

查看控制台信息，都是同样的效果

方法一和二：ajax发送请求时，没有写dataType: “json”,预期服务器返回的数据类型

 function update_PTInfo() {var formatter = $("#update_frm").serialize();$.ajax({type: "POST",url: "/pt-sts/updateUserInfo",data: formatter,//dataType: "json", //没有预期指定服务端返回数据格式success: function(result){console.log(result.msg);console.log(result);}});};

我们再请求同样的地址，查看控制台会发现，方法一正常，方法二取不到单个值了

console.log(result.msg);//取不到值了

这时候怎么做呢？

jQuery.parseJSON()函数将格式完好的JSON字符串转为与之对应的JavaScript对象：所谓"格式完好"，就是要求指定的字符串必须符合严格的JSON格式。将方法二ajax改为如下，即可正常处理json。

function update_PTInfo() {var formatter = $("#update_frm").serialize();$.ajax({type: "POST",url: "/pt-sts/updateUserInfo",data: formatter,//dataType: "json",success: function(result){var res = $.parseJSON(result);  //用jQuery处理传过来的json值console.log(res.msg);console.log(res);}});
};

综上两种方法的注意点，区别，方法一明显写法更简单。

ajax-form表单快速传递参数相关推荐

ajax form表单提交 input file中的文件
现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input f ...
from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
ajax form表单提交，serialize和formData的区别
** ajax form表单提交,serialize和formData的区别 ** 把form表单里面的内容序列化并用ajax提交,如下方法: function ajaxFormSub(id,url) ...
jQuery form表单的serialize()参数和其他参数如何一起传给后端
在前端给后端传递参数时,有时候form表单,我们为了方便,直接可以通过 var formData=$("#formid").serialize();来统一传给后端,这样可以节省很多 ...
php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话在使用form表单的时候,一旦点击提交触发sub ...
springmvc ajax form表单提交出现400报错
此为转载:确实很不错,最下有原文的传送门 springmvc form表单提交报400错误,出现400错误的原因及解决方法: 原因: 在SpringMVC中的Action中处理前台ajax请求传过来的 ...
ajax form表单提交_LayUI提交表单，监听select，分页组件
1.LayUI提交表单这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...
django ajax form表单,Django学习系列之Form表单和ajax(示例代码)
昵称: 生日: 性别: 男女地址: 手机号: 邮箱: [修改] {% csrf_token %}$(\'#js ...
php表单生成器实验报告,PHP表单生成器,快速生成现代化的form表单,快速上手
form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 本 ...

ajax-form表单快速传递参数

serialize()方法序列化表单内容为字符串,用于Ajax请求

方法一：controller后台接受，和普通接受参数一样

异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。

方法二：另外一种写法

JSON.toJSONString是将对象转化为Json字符串返回

查看控制台信息，都是同样的效果

方法一和二：ajax发送请求时，没有写dataType: “json”,预期服务器返回的数据类型

我们再请求同样的地址，查看控制台会发现，方法一正常，方法二取不到单个值了

这时候怎么做呢？

综上两种方法的注意点，区别，方法一明显写法更简单。

ajax-form表单快速传递参数相关推荐

最新文章

热门文章

ajax-form表单快速传递参数

serialize()方法 序列化表单内容为字符串,用于Ajax请求

方法一：controller后台接受，和普通接受参数一样

异步获取 json 数据，加上 @ResponseBody 后，会直接返回 json 数据。

方法二：另外一种写法

JSON.toJSONString是将对象转化为Json字符串返回

查看控制台信息，都是同样的效果

方法一和二 ：ajax发送请求时，没有写dataType: “json”,预期服务器返回的数据类型

我们再请求同样的地址，查看控制台会发现，方法一正常，方法二取不到单个值了

这时候怎么做呢？

综上两种方法的注意点，区别，方法一明显写法更简单。

ajax-form表单快速传递参数相关推荐

最新文章

热门文章

serialize()方法序列化表单内容为字符串,用于Ajax请求

方法一和二：ajax发送请求时，没有写dataType: “json”,预期服务器返回的数据类型