后端构造JSON格式传给前端
方式一
后端
传递可迭代对象
记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象
如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环
@WebServlet("/Demo6")
public class Demo6 extends HttpServlet {@Overrideprotected 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')//后端传的是可迭代对象，所以用forfor(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>方式二
后端
@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf8");ObjectMapper objectMapper=new ObjectMapper();//方式二 只传对象，前端直接使用，不能用forStudent 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 {@Overrideprotected 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>
LPC2138 中断实验)
