构造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>
相关推荐
Mephisto.java39 分钟前
【大数据学习 | kafka高级部分】kafka的优化参数整理
大数据·sql·oracle·kafka·json·database
沐雪架构师2 小时前
mybatis连接PGSQL中对于json和jsonb的处理
json·mybatis
丁总学Java3 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
wrx繁星点点4 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
JungleCoding4 小时前
403 Request Entity Too Lager(请求体太大啦)
状态模式
Mephisto.java5 小时前
【大数据学习 | kafka高级部分】kafka的kraft集群
大数据·sql·oracle·kafka·json·hbase
Mephisto.java5 小时前
【大数据学习 | kafka高级部分】kafka的文件存储原理
大数据·sql·oracle·kafka·json
待磨的钝刨8 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
小百菜1 天前
dom4j实现xml转map,xml转json字符串
xml·json·xml转map·xml转json
yuchangchenTT1 天前
就是这个样的粗爆,手搓一个计算器:JSON格式化计算器
前端·json·365快速计算器·在线计算器