Ajax和JSON的基本用法
创始人
2024-05-31 04:24:01
0

局部请求页面不会变化,返回的响应我们要动态获取,获取后选择数据更新区域。



全局请求会更新整个页面例子如下。

@WebServlet("/request")
public class RequestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("get");直接更新了整个页面}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("post");}
}

respose.getWriter().println("get");会将原来的页面销毁掉,重新生成另一张页面,但是在原来的页面中有不需要刷新的页面,我们想要的效果只是小部分区域进行显示刷新出来的内容,这时就要用到Ajax。

[{"empno": "7369",数字可以加双引号也可以不加"ename": "李宁","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"},{"empno": "73691","ename": "李上","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"}
]

JS如何展示json数据利用json数据如下

Title

注意:ajax请求返回的不再与展现相关,而是纯纯的数据,浏览器接受后要考虑如何展示。

两个数据转换核心问题:

  1. 数据对象序列化为JSON字符串----JacKson解决序列化问题

  1. JSON字符串如何转换成数据对象--

@WebServlet("/news")
public class NewServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List list = new ArrayList<>();list.add(new News("TIOBE:2018编程语言排行趋势","2018","TIBOT","...."));list.add(new News("TIOBE:2017编程语言排行趋势","2017","TIBOT","...."));list.add(new News("TIOBE:2016编程语言排行趋势","2016","TIBOT","...."));//序列化过程,可能报错ObjectMapper objectMapper=new ObjectMapper();String json = objectMapper.writeValueAsString(list);response.setContentType("text/json;charset=utf-8");response.getWriter().println(json);}
}

Tomcat配置问题:Warning:The selected directory is not a TomEE home

解决:tomcat选择的时候选错了

错误: 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099; nested exception is:

java.net.BindException: Address already in use: JVM_Bind

解决:端口占用了

解决:中途导入的jar包和依赖没有被out出来,最后允许的目录在Out,如果jar添加了,out没有,那么此时需要手动添加

反序列化过程:

原生的ajax要创建对象,接受并且判断响应,很麻烦,有封装好的。

get方式发送请求:


post方式发送请求:

    

异步执行代码实例:

结果:send没有收到响应,就执行console.log("请求已经发送");这句话,然后随着状态变化事件得到执行。

结果:当send执行没有结束,没有收到响应,不会执行console.log("请求已经发送");,导致事件状态变化监听失败,所以if必须提前,那么就可以执行相应的语句;

效果

准备数据

@WebServlet("/channel")
public class ChannerServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//levels为一级目录大类,parent为一级大类的code,这两个都是用户选择的参数//用户根据需要选择一级大类,然后根据用户的选择获取大类的code,再用parent和用户选择的比较,得到二级大类String level=request.getParameter("level");String parent = request.getParameter("parent");List chlist = new ArrayList<>();if (level==null){level = "0";} else if (parent==null) {parent = "0";}if (level.equals("1")) {chlist.add(new Channel("ai","人工智能"));chlist.add(new Channel("web","前端开发"));}else if(level.equals("2")){if (parent.equals("ai")) {chlist.add(new Channel("dl","深度学习"));chlist.add(new Channel("cv","计算机视觉"));chlist.add(new Channel("nlp","自然语言处理"));} else if (parent.equals("web")) {chlist.add(new Channel("html","前端html"));chlist.add(new Channel("css","前端css"));chlist.add(new Channel("js","前端js"));}}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(chlist);response.setContentType("application/json;charset=utf-8");response.getWriter().println(json);}
}

实体类:

public class Channel {private String code;private String name;public Channel(String code, String name) {this.code = code;this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) {this.name = name;}
}

前端界面发送请求:



Title






相关内容

热门资讯

阿索卡·塔诺为什么没有在星球大... 阿索卡·塔诺为什么没有在星球大战正传出现?阿索卡没有听说过,,是什么鬼阿索卡是阿纳金年轻时收的徒弟 ...
河北公布第二批美丽河湖名单,1... 转自:河北新闻网河北公布第二批美丽河湖名单,15个河湖入选全省美丽河湖总数达26个河北日报讯(记者马...
热血英豪灵异少女带幻影水晶 热血英豪灵异少女带幻影水晶我看见有人用灵异带幻影能幻影出灵异的ZXC,怎么弄的? 是不是他改了...
潍柴:自主锻造“国产引擎” 加... 历时10年,投入1.2亿元,接连突破甲醇发动机抗机油乳化技术、低温冷启动技术、控早燃爆震技术等多项行...
西班牙多地将出现强降雨等极端天... 来源:央视新闻客户端当地时间7月10日,西班牙国家气象局警告称,当地时间11日起,该国多个地区将出现...
来中国前,黄仁勋先去见了特朗普   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 【文/观察者网 柳...
警惕虚假宣传诱导网络贷款的风险 转自:中国银行保险报网□本报记者 仇兆燕7月10日,金融监管总局金融消费者权益保护局发布风险提示,提...
比特币突破11.7万美元 续创... .ct_hqimg {margin: 10px 0;} .hqimg_wrapper {text-a...
翼年代记漫画最近章节都说什么了... 翼年代记漫画最近章节都说什么了?OVA《东京默示录》是漫画107话到135话的内容,漫画要从136话...
中国天瑞水泥遭Yu Kuo C... .ct_hqimg {margin: 10px 0;} .hqimg_wrapper {text-a...