【转载】Ajax与Controller数据交互

转自：https://www.cnblogs.com/kasi/p/8443289.html

1.概念
在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Controller返回值两个方面理解

1.1 从Ajax → Controller

无论Ajax以什么形式发送数据,在Controller中的接收方法都没有差异
对象操作 key/value类型 JSON 序列化表单
Ajax 发送 data:“name=”+name data:{“name”:name} data:$("#form").serialize()
Controller 接收 public void receive(String name) / (User user)
1.2 从Controller → Ajax

Controller返回Json类型的数据需要加@ResponseBody注解
Ajax的返回值data可以是任何名称
对象操作 JSON
pojo类型 map类型
Controller 发送 return Msg; return map;
Ajax 接收 success:function(data){
alert(data.result)
2. 实例说明
JSP表单

姓名:
年龄:
性别:男女
爱好:篮球足球乒乓球
地址:

    <input type="button" value="提交" id="sendTo">

2.1 Ajax传值

方式一:key/value传值
普通类型传递需要注意复选框如果要和其他值一起传最好将其局部序列化

方式二:JSON传值
JSON与key/value只有在data的数据格式不一样(有些资料说需要加contentType:“application/json; charset=utf-8”,但我没加也可以传值
//此处如果加入序列化后的复选框就传不过去,暂时还没弄清楚怎么将序列化后的值与json数据一起传,如果只是传复选框可以用"data:hobby,"这种方式
data:{“name”:name,“age”:age,“sex”:sex,“address”:address},
方式三:序列化(数据量大时推荐使用)
在遇到复杂的表单时很有用

2.2 Controller返回值

Controller接收值常用的就两种,一种是springmvc的参数绑定,另一种为JavaBean类型接收

方式一:map集合返回
注意:复选框hobby值的形式取决于userbean中的hobby类型,String类型时传过来的值是逗号隔开的
@RequestMapping("/toServer.do")
@ResponseBody
public Map<String,String> sendString(User user){ //user是与页面参数对应的JavaBean
//map集合用来存放返回值
Map<String,String> map = new HashMap<String, String>();
if(user != null) {
map.put(“result”,“提交成功”);
}else {
map.put(“result”,“提交失败”);
}
return map;
}
方式二:Pojo返回

先定义一个用于返回数据的Pojo

public class Msg {
private int code; //返回100表示成功,200表示失败
private String msg; //返回提示信息
private Map<String,Object> extend = new HashMap<String,Object>(); //用户返回给浏览器的数据

public static Msg success() {
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功");
return result;

}
public static Msg fail() {
Msg result = new Msg();
result.setCode(200);
result.setMsg(“处理失败”);
return result;
}

public Msg add(String key,Object value) {
this.getExtend().put(key, value);
return this;
}
//get&set方法
Controller

@RequestMapping("/toServer.do")
@ResponseBody
public Msg sendString(User user){
System.out.println(user.toString());
if(user != null) {
return Msg.success();
}else {
return Msg.fail();
}
}

// ajax的success:function(data),data的返回值为{“code”:100,“result”:“成功”}
/*此pojo可以使用return Msg.success.add(“user”,user)的方式向ajax返回实体对象
{“code”:100,“msg”:“处理成功”,“extend”:{“user”:{“name”:“kasi”,“age”:24,“sex”:“m”,“hobby”:null,“address”:“中国”}}} */

举报
关注
一键三连

【转载】Ajax与Controller数据交互相关推荐

【Demo】idea搭建SpringBoot和AJAX前后端数据交互
此文章详细介绍了idea 搭建springboot步骤,以及简易的前后端通过ajax进行简单数据交互代码,二话不说,进入正题. 第一步.idea开发工具搭建springboot框架来看下整个项目结构 ...
Ajax 前端后端数据交互
Ajax 前端/后端数据交互一概述同步: 一请求一响应,全局刷新异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
Ajax实现局部数据交互的一个简单实例
想要实现的功能:利用Ajax技术通过点击一个<button>按钮,然后在指定的文本框中输出想要的值. 1.使用Jsp创建一个前端页面. 1 <body> 2 <div s ...
Ajax 前后端数据交互
ajax 数据交互今天又是奋斗的一天,行吧,来学习ajax ajax 数据交互什么是ajax? ajax的`优势` ajax的使用创建一个ajax对象配置这个对象发送请求接受返回过来的数据 ...
AJAX与JSON数据交互处理
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术 ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax获取java后台数据_jQuery ajax获取后台数据怎么在前端显示。
前后端分离以后,前端界面采用ajax与后台数据交互.现在从后台获取到下载文件的集合,怎么在前端一行一行显示,点击某一行可以直接跳转过去下载对应的文件. pageEncoding="UTF-8 ...
flask框架前后端数据交互
flask开发中需要用到ajax进行前端数据交互,主要流程为三步: 前端引用js文件,调用其中函数后端完成调用数据库函数并设置数据格式 js中使用ajax请求接收数据,并将返回的数据显示到前端 ...
SpringMVC之数据传递三Ajax与Controller交互
前面学习了拦截器,通过拦截器我们可以拦截请求,做进一步处理之后再往下进行,这里我们使用Ajax的时候会有一个问题就是会把js.css这些静态资源文件也进行了拦截,这样在jsp中就无法引入的静态资源文件 ...

【转载】Ajax与Controller数据交互

【转载】Ajax与Controller数据交互相关推荐

最新文章

热门文章