ssm框架里面前端拿HTML写,基于SSM框架的web开发——ajax实现先后台数据交互

前台向后台传输数据

1丶用传统的form表单提交,举个栗子:

d6cff38cc5d9cf2ce98be17e87d2844f.png

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

get与post的区别:

get:

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

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

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

function go(){

$.ajax({

type:"post",

url:"login.do",

contentType:"application/x-www-form-urlencoded;charset=utf-8",

data:"username="+$("input[name=username]").val()+"&password="+$("input[name=password]").val(),

success:function(data){

alert(data);

},

error:function(){

alert("失败");

}

});

}

contentType:指明传输到后台的数据格式是 url编码字符串格式(application/x-www-form-urlencoded),这也是http协议的默认请求数据格式,因此这里可写可不写。前端

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

后台接收前台数据并响应

Controller 类中的方法为jquery

@RequestMapping("/login.do")

public void login(User user,HttpServletResponse response)throws IOException {

userService.login(user);

//...

response.getWriter().write("登录信息");

}

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

这么写也是能够自动映射的:spring

@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.json

总结:

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

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

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

1丶导入JSON的jar包(网上找)

2丶在springMVC的配置文件中加入以下代码:

前端:

function go(){

var json={"username":$("input[name=username]").val(),

"password":$("input[name=password]").val()};

var jsonstr=JSON.stringify(json);

$.ajax({

type:"post",

url:"login.do",

contentType:"application/json;charset=utf-8",

dataType:"json",

data:jsonstr,

success:function(data){

alert(data.username);

},

error:function(){

alert("失败");

}

});

}

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数据的原理,如图:

064a973263880f96799ce885a1be224a.png

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

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

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