（七）利用ajax发送Post请求到后台
上一节，我们大致讲了利用ajax发送Get请求到后台服务，这一节，我们来讲解发送post请求
一般说来，我们获取信息使用Get请求，向后台请求某些信息；使用Post请求向后台发送一些信息，而其他几种方法，比如Put，Delete等，受制于浏览器，tomcat版本等等，不一定都能使用。
但是这些都非绝对，使用get发送信息，使用post获取信息，也是有的，都是请求，并不拘泥于理论，看实际使用场景的。
首先，我们还是准备一个工程，就用之前的工程。
页面中，发送一个ajax post请求，主要代码如下
$("#POSTButton").click(function(){
let id = $("#myInput").val();
$.ajax({
url:basePath+"/firstPost",
data:id,
type:'POST',
dataType:'text',
contentType:'application/json',
success:function(result){
$("#myInput").val(result);
}
})
});
这个跟之前get方法一样的结构，只是type那里方法是POST
然后后台服务那里，我们接受这个请求的方法，只需要将method写成post即可
@ResponseBody
@RequestMapping(value="/firstPost",method=RequestMethod.POST)
public String myFirstPost(@RequestBody String msg){
System.out.println("from page msg:"+msg);
return "Good "+msg;
}
关键语句就是 method=RequestMethod.POST
限定这个方法只接受post请求，如果发送get请求，服务器会报405错错误
image.png
好了，这个是post的基本设定，接下来，关键就在于data的形式，不同形态的data，后端接受这个data的方式就不一样
1. 最简单的方式
我们可以学get方法那样，把post参数写在url后面，就是传统的方式，例如
http://test.com?user=Joe&age=12
通过这种方式，将用户Joe上传给服务器
那么，我们的js代码就这样写
$("#POSTButton").click(function(){
let user = 'Joe';
let age = 12;
$.ajax({
url:basePath+"/firstPost"+"?user="+user+"&age="+age,
type:'POST',
dataType:'text',
contentType:'text/plain',
success:function(result){
$("#myInput").val(result);
}
})
});
java后台接受这个参数的controller方法这样写
@ResponseBody
@RequestMapping(value="/firstPost",method=RequestMethod.POST)
public String myFirstPost(String user,Integer age){
System.out.println("from page user:"+user);
System.out.println("from page age:"+age);
return "Good";
}
把工程运行起来，在浏览器访问
http://localhost:12344/springstart/hello
这里端口写你自己设置的端口
点击页面上的 post按钮，可以在后台代码中看到打印输出
from page user:Joe
from page age:12
这个是最简单的一种方式，当然，这只比较非主流的方式
一般post的参数不会写在链接中
其次，如果有安全性要求的话，使用https请求，写在链接中是无法加密的
所以一般不会使用这种方式。
2. 最常见的方式
目前最常见的方式就是使用json格式传送数据
使用json格式表达我们的上面的user的话，大概是这样：
{
"name":"Joe",
"age":12
}
json格式是现在最流行的一种数据格式，被使用在各个场景下，几乎所有语言都支持json格式的解析。具体的相关格式，请自行百度。
我们的js代码这样写：
$("#POSTButton").click(function(){
let oneUser = new Object();
oneUser.name = 'Joe';
oneUser.age = 12;
let msg = JSON.stringify(oneUser);
$.ajax({
url:basePath+"/firstPost2",
type:'POST',
data:msg,
dataType:'json',
contentType:'application/json',
success:function(result){
$("#myInput").val(result);
}
})
});
这里，我们把usl改了一点
url:basePath+"/firstPost2"
与之前的接口不同，这里使用 firstPost2，以便后台能保留前面的方法。
我们创建了一个对象，把用户的参数给它，然后，使用 JSON.stringify将这个对象转为json字符串
然后，在ajax的参数中，有些变动
dataType:'json'
contentType:'application/json'
这两个表明，我们发送出去的数据，是json
对应的，我们的后台接收数据的方法，需要适当修改一下
@ResponseBody
@RequestMapping(value="/firstPost2",method=RequestMethod.POST)
public String myFirstPost2(@RequestBody User user){
System.out.println("from page user:"+user.toString());
return "Good";
}
与之前方法的差别就是参数
@RequestBody User user
首先，注解 @RequestBody 用来将页面传送过来的json结果，对应到我们的接收实例上面，这里，我们的实例是user
package com.springstart.model;
public class User {
private String name;
private Integer age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
}
这种只有属性以及属性对应的set，get的类，有的地方叫POJO类，有的地方叫java bean，不管叫什么，深究起来也没意义，这种类型的类，在web后台开发中很常见，有时候会在一个web后台项目源码中占很大比例。
这种类，其作用，就是保存数据使用，有时候保存页面过来的数据，有时候保存从数据库查询的数据，一般来说，set和get方法必须有，不排除一些比较智能的框架自动匹配的情况，然后就是一些其他的方法，比如用于跟踪数据的toString，将指定的成员变量组装起来成为一个字符串，便于日志记录或者打印输出。
现在的IDE都具备自动生成set和get等方法的机制，只需要将成员变量定义出来即可，不会用的自行百度自己使用的IDE如何自动生成。
这里，我们使用User类来接收页面给过来的json数据，User类成员变量和页面的json数据一一对应，这样拿下来就可以直接使用。正如我们代码中的，使用toString将参数输出。
当然，我们也可以不用类去接收，使用字符串也可以。
@ResponseBody
@RequestMapping(value="/firstPost2",method=RequestMethod.POST)
public String myFirstPost2(@RequestBody String msg){
System.out.println("from page user:"+msg);
return "Good";
}
这样，会把ajax提交上来的json字符串，放到msg中。
上面这种方式，是一种万精油的方式，任何前端和后台，都可以这么写，只要前端给到后台的数据，组合成json即可，后台拿到数据后自己处理，如何使用，持久化等，都没有问题。
3.提交form
form在页面上，一般叫做表单，在form下，有多个数据，用户可以填写后一次性提交，平时我们填写的登陆，注册等，都是在一个表单上执行的。
这里，我们写一个简单的表达，用户输入用户名和密码，模拟用户登陆。
<span>表单demo</span>
<form id="formDemo">
<label>用户名：</label>
<input id="name" name="name"/>
<br>
<label>密码：</label>
<input id="passwd" name="passwd" type="password"/>
<br>
<button id="formButton" type="button">提交</button>
</form>
在jsp中我们加一段这个，这里就是一个简单的form，里面有两个input，每个input都需要有name属性，因为form在提取里面的字段的时候，是以name作为变量名的。
然后，这里有个button，类型type="button"，如果不写这个type，那么button在被点击时，会自动提交，button的默认类型是submit，我们这里希望从js里面通过ajax提交。
这个form在页面显示出来
form.png
不用在乎样式，能用就行。
对应的，我们在js里面，写一段button点击触发的函数。
这里，对于form数据的处理方式有很多种，我们这里讲一下最普通的做法。
$("#formButton").click(function () {
let msg = $("#formDemo").serialize();
$.ajax({
url:basePath+"/firstPostForm",
type:'POST',
data:formData,
success:function(result){
$("#myInput").val(result);
}
})
});
这里的关键代码是
let msg = $("#formDemo").serialize();
将form的数据序列化，通过调试打断点，我们可以看到msg的结构类似于
name=Joe&passwd=123
实际就是把form 中的参数一个一个的用&连接起来
我们的接收方式有几种
@ResponseBody
@RequestMapping(value="/firstPostFrom",method=RequestMethod.POST)
public String myFirstPost3(HttpServletRequest request){
System.out.println("from page login:"+request.getParameter("name"));
return "Good";
}
HttpServletRequest request是获取参数的通用方式
@ResponseBody
@RequestMapping(value="/firstPostFrom",method=RequestMethod.POST)
public String myFirstPost3(String name,String passwd){
System.out.println("from page login,name:"+name);
return "Good";
}
直接把给过来的参数写到方法的参数中，一一对应即可
我们也可以写一个类来接收
package com.springstart.model;
public class Login {
private String name;
private String passwd;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPasswd() {
return passwd;
}
public void setPasswd(String passwd) {
this.passwd = passwd;
}
@Override
public String toString() {
return "Login{" +
"name='" + name + '\'' +
", passwd='" + passwd + '\'' +
'}';
}
}
@ResponseBody
@RequestMapping(value="/firstPostForm",method=RequestMethod.POST)
public String myFirstPost3(Login login){
System.out.println("from page login,name:"+login.getName());
return "Good";
}
这里数据不是用json发送过来的，所以不用加注解，直接就能转换过来。
从上面的方法我们可以看出，完全可以把form中的参数一个一个的读取出来，组合成json来传输，现在一些前端页面已经不再使用form的形式了。
但是，如果要上传文件，使用form会简单一些，我们下一篇再讲。
本文源码
springstart github post_demo，请自行下载
网友评论