构造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>
相关推荐
多多*43 分钟前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
如生命般费解的谜团8 小时前
LLM学习笔记(7)Scaled Dot-product Attention
人工智能·笔记·学习·语言模型·json
Beekeeper&&P...21 小时前
HttpServletRequest req和前端的关系,req.getParameter详细解释,req.getParameter和前端的关系
前端·状态模式
白茶等风121381 天前
Unity 设计模式-状态模式(State Pattern)详解
设计模式·状态模式
zzzhpzhpzzz1 天前
设计模式——状态模式
设计模式·状态模式
无敌岩雀1 天前
C++设计模式行为模式———状态模式
c++·设计模式·状态模式
前端熊猫1 天前
json数据四大加载方式
json
( •̀∀•́ )9201 天前
如何使用 `global.json` 管理(切换) .NET SDK 版本
前端·json·.net
originalHSL2 天前
Load-Balanced-Online-OJ(负载均衡式在线OJ)
linux·c++·git·vscode·http·https·json
枫叶落雨2222 天前
JSONObject.parseObject(jsonString); 和JSON.parseObject(jsonString)区别!!!!!!
json