基于SSM框架的web开发——ajax实现前后台数据交互

前台向后台传输数据

1丶用传统的form表单提交，举个栗子：

假设在第一个文本框中输入 admin ,在第二个密码框中输入 123 ，那么当点击submit提交按钮时，表单中的数据将会封装成如下格式的一个字符串发送到后台："username=admin&password=123"  。这种字符串就是江湖人称的 url编码字符串（application/x-www-form-urlencoded）。

get与post的区别：

get:

前端浏览器是将所有的请求信息都写进请求报文中发送给后台服务器的。当我们设置form表单中的method="get"时，请求数据（比如上面的"username=admin&password=123"）会附在url后面发送给后台：http://localhost:8080/项目名/login.do?username=admin&password=123  ,问号前表示请求的映射地址，问号后表示请求的数据，我们在浏览器的url地址栏中可以看到这些内容。

post:

当设置form表单中的method="post"时，请求数据（"username=admin&password=123"）会被放在请求报文的请求体中，而位于请求头中的url此时是：http://localhost:8080/项目名/login.do

2丶用ajax传输数据（这里用jQuery封装的ajax为栗）

contentType：指明传输到后台的数据格式是 url编码字符串格式（application/x-www-form-urlencoded），这也是http协议的默认请求数据格式，所以这里可写可不写。

data：传输到后台的数据内容:"username=admin&password=123"。另外，如果传输的是如下格式的JSON对象：{"username":"admin","password":"123"}，那么写进请求报文中时会自动转换成"username=admin&password=123"格式。神奇吧。。。

后台接收前台数据并响应

Controller 类中的方法为

@RequestMapping("/login.do")
	public void login(User user,HttpServletResponse response)throws IOException {
		userService.login(user);
		//...
		response.getWriter().write("登陆信息");
	}

springMvc会将前台传输过来的数据自动映射到方法参数上（这里映射到了user对象），但user类中必须要有username，passwords属性及相应的set方法。

这么写也是可以自动映射的：

@RequestMapping("/login.do")
	public void login(String username,String password,HttpServletResponse response) throws IOException {
		System.out.println("username");
		System.out.println("password");
		//...
		response.getWriter().write("登陆信息");
	}
	

response.getWriter().write("登陆信息");用于将返回数据("登陆信息")写进响应报文并发送到前台。前端ajax中的成功回调函数success:function(data){alert(data);}  中的参数data即为返回数据（"登陆信息"）；这里的参数随便取名，不一定非要是data.

总结：

Http请求和响应报文本质上都是一串字符串，我们从流中只能读取到原始的字符串报文，同样，我们往输出流中也只能写原始的字符。

ajax+JSON实现前后台数据传输

 为了实现前后端分离，请求和响应的数据格式都使用JSON是个很不错的选择。用这种方式之前，得先配置一下环境，共两步：

1丶导入JSON的jar包（网上找）

2丶在springMVC的配置文件中加入如下代码：

前端：

contentType:"application/json;charset=utf-8"; 告诉后台我前端传过去的数据是JSON格式，你要用JSON的方式给我解析。

dataType:"json";告诉后台我前台需要的是JSON格式的数据。

data:jsonstr; 这里必须得是JSON字符串，javascript中JSON对象转化为JSON字符串的方法:JSON.stringify()。      

注意：

javascript中JSON格式的字符串:

var JSONStr1 = "{\"name\" : \"张三\"}";

以下的写法不是js中JSON格式的字符串，它只是一个js的字符串:

var JSONStr2 = "{'name' : '张三'}";

所以，想要把JSON对象转化为JSON字符串，直接在JSON对象上加单引号或双引号是行不通的。

后端：

@RequestMapping("/login.do")
	@ResponseBody
	public User login(@RequestBody User user){
		
		User user1=new User();
		user1.setUsername("你好");
		user1.setPassword("321");
		return user1;
	}

这里返回的是一个User对象，其实不管返回的是User对象，JSON对象，Map对象，只要是对象格式，都会被转化成JSON对象传到前台。

下面浅谈一下转换为JSON数据的原理，如图：

我们开始时在springMVC配置文件中加入的会自动将AnnotationMethodHandlerAdapter类注入到Spring容器，该类中有很多消息转换器(HttpMessageConverter)，JSON转换器便是其中的一个。

在请求数据(HttpInputMessage)到达后台时会经过JSON转换器将数据转化为JSON对象然后通过@RequestBody赋值给Controller类中方法的参数。

Controller类中方法的返回的对象会先经过JSON转换器转化为JSON对象变成响应数据(HttpOutputMessage)然后写进响应报文传给前台。