直播网站建设1个节点多少钱,建设公司网站新闻素材管理,网站运营策划,萧山网站建设那家好后端构造JSON格式传给前端
方式一
后端
传递可迭代对象 记住#xff0c;传json格式#xff0c;如果你要用for循环 那么你的对象一定要是可迭代的对象
如果你单构造个类过去#xff0c;你用for是肯定循环不了的#xff0c;你必须使用List这种可以迭代的对象#xff0c;才…后端构造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;charsetutf8);ObjectMapper objectMappernew ObjectMapper();//记住前端如果使用for那么你一定不能只传对象因为对象无法迭代一定要把对象放进可迭代的对象内才可以使用//方式一ListStudent studentsnew ArrayList();students.add(new Student(张三,1));String JsonStringobjectMapper.writeValueAsString(students);resp.getWriter().write(JsonString);
}
前端 script srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptscript$.ajax({type:get,url:Demo6,success:function(body){let contentdocument.querySelector(.content)//后端传的是可迭代对象所以用forfor(let student of body){let newDivdocument.createElement(div);newDiv.classNamenewDIV;let namedocument.createElement(div);name.classNamename;name.innerHTMLstudent.name;content.appendChild(name);let StudentIddocument.createElement(div);StudentId.classNameid;StudentId.innerHTMLstudent.StudentID;content.appendChild(StudentId);content.appendChild(newDiv);}}});/script
方式二
后端 Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(application/json;charsetutf8);ObjectMapper objectMappernew ObjectMapper();//方式二 只传对象前端直接使用不能用forStudent snew Student(张三,1);String JsonStringobjectMapper.writeValueAsString(s);resp.getWriter().write(JsonString);}
前端 $.ajax({type: get,url:Demo6,success:function (body){let contentdocument.querySelector(.content)let newDivdocument.createElement(div);newDiv.classNamenewDIV;let namedocument.createElement(div);name.classNamename;//后端传的是对象不能用for 直接使用name.innerHTMLbody.name;content.appendChild(name);let StudentIddocument.createElement(div);StudentId.classNameid;StudentId.innerHTMLbody.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 objectMappernew ObjectMapper();User userobjectMapper.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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typetext nameid ididinput typetext namename idnamebutton idbut提交/buttonscript srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptscriptlet idInputdocument.querySelector(#id);let nameInputdocument.querySelector(#name);let butdocument.querySelector(#but);but.onclickfunction(){let ididInput.value;let namenameInput.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
