后端构造JSON格式传给前端
方式一
后端
传递可迭代对象
记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象
如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环
@WebServlet("/Demo6")
public class Demo6 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
ObjectMapper objectMapper=new ObjectMapper();
//记住，前端如果使用for，那么你一定不能只传对象，因为对象无法迭代，一定要把对象放进可迭代的对象内，才可以使用
//方式一
List<Student> students=new ArrayList<>();
students.add(new Student("张三",1));
String JsonString=objectMapper.writeValueAsString(students);
resp.getWriter().write(JsonString);
}前端
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$.ajax({
type:'get',
url:'Demo6',
success:function(body){
let content=document.querySelector('.content')
//后端传的是可迭代对象，所以用for
for(let student of body){
let newDiv=document.createElement('div');
newDiv.className="newDIV";
let name=document.createElement('div');
name.className="name";
name.innerHTML=student.name;
content.appendChild(name);
let StudentId=document.createElement('div');
StudentId.className="id";
StudentId.innerHTML=student.StudentID;
content.appendChild(StudentId);
content.appendChild(newDiv);
}
}
});
</script>方式二
后端
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("application/json;charset=utf8");
ObjectMapper objectMapper=new ObjectMapper();
//方式二 只传对象，前端直接使用，不能用for
Student s=new Student("张三",1);
String JsonString=objectMapper.writeValueAsString(s);
resp.getWriter().write(JsonString);
}前端
$.ajax({
type: 'get',
url:'Demo6',
success:function (body){
let content=document.querySelector('.content')
let newDiv=document.createElement('div');
newDiv.className="newDIV";
let name=document.createElement('div');
name.className="name";
//后端传的是对象，不能用for 直接使用
name.innerHTML=body.name;
content.appendChild(name);
let StudentId=document.createElement('div');
StudentId.className="id";
StudentId.innerHTML=body.StudentID;
content.appendChild(StudentId);
content.appendChild(newDiv);
}
})前端构造JSON格式传给后端
后端
package Demo;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
class User{
public String id;
public String name;
// 在使用 Jackson 进行 Java 对象的反序列化时，Jackson 需要使用一个无参构造函数（默认构造函数）来创建对象实例。
public User(){
}
public User(String id, String name) {
this.id = id;
this.name = name;
}
}
@WebServlet("/Demo7")
public class Demo7 extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
ObjectMapper objectMapper=new ObjectMapper();
User user=objectMapper.readValue(req.getInputStream(), User.class);
System.out.println(user.id);
System.out.println(user.name);
resp.getWriter().write("id: "+user.id);
resp.getWriter().write("name: "+user.name);
}
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="id" id="id">
<input type="text" name="name" id="name">
<button id="but">提交</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
let idInput=document.querySelector('#id');
let nameInput=document.querySelector('#name');
let but=document.querySelector('#but');
but.onclick=function(){
let id=idInput.value;
let name=nameInput.value;
let User={
id:id,
name:name
}
$.ajax({
type:"post",
url:"Demo7",
data:JSON.stringify(User),
success:function(){
// 当返回时，说明传入成功
alert("传输成功")
},
error:function(){
alert("传输失败")
}
})
}
</script>
</body>
</html>