构造JSON格式 - 技术栈

后端构造JSON格式传给前端

方式一

后端

传递可迭代对象

复制代码

记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象
如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环

java 复制代码

@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);
}

前端

html 复制代码

 <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>

方式二

后端

java 复制代码

    @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);
    }

前端

html 复制代码

        $.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格式传给后端

后端

java 复制代码

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);
    }
}

前端

html 复制代码

<!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>