疑问
NewsListServlet.java package com.zhou.ajax; import java.io.IOException; import java.util.ArrayList; import java.util.List; 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 com.alibaba.fastjson.JSON; @WebServlet("/news_list") public class NewsListServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //从请求中获取name为t的属性的值 String type = request.getParameter("t"); List<News> list = new ArrayList<News>(); if(type!=null && type.equals("pypl")) { list.add(new News("PYPL:2018年5月份全球编程语言排行版","2018-5-1","PYPL","...")); list.add(new News("PYPL:2018年6月份全球编程语言排行版","2018-5-1","PYPL","...")); list.add(new News("PYPL:2018年7月份全球编程语言排行版","2018-5-1","PYPL","...")); list.add(new News("PYPL:2018年8月份全球编程语言排行版","2018-5-1","PYPL","...")); }else if(type == null || type.equals("tiobe")) { list.add(new News("TIOBE:2018年5月份全球编程语言排行版","2018-5-1","TIOBE","...")); list.add(new News("TIOBE:2018年6月份全球编程语言排行版","2018-5-1","TIOBE","...")); list.add(new News("TIOBE:2018年7月份全球编程语言排行版","2018-5-1","TIOBE","...")); list.add(new News("TIOBE:2018年8月份全球编程语言排行版","2018-5-1","TIOBE","...")); } //使用fastJson的核心对象JSON中的toJSONString()方法对list对象进行序列化 //ps:对原始数据无论我们是使用List、set、hashMap 对外进行序列化字符串的时候一律将其转换成JSON字符串对象 //通过回传JSON可以让我们的数据有效的描述,在客户端我们可以通过AJAX的方式对这些传递的JSON字符串转换为JSON对象 //然后在当前的页面中输出就可以了 String json = JSON.toJSONString(list); System.out.println(json); //因为List中出现了中文所以我们这里要设置字符集格式 response.setContentType("text/html;charset=UTF-8"); response.getWriter().println(json); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //页面就绪函数,当页面加载完之后就会执行function里面的代码 $(function(){ //JQuery提供的AJAX核心方法 $.ajax({ "url":"/ajax/news_list", //想象为什么这里post会出错 "type":"get", //"data":"t=pypl&b=333&c=aaa", "data":{"t":"pypl","b":"222","c":"aaa"}, //在javaScript中的key不加引号也是可以识别出来的,只能在javaScript中这样使用 "dataType" : "json", //处理成功的情况下 json表示的就是服务器返回的数据 //之后能把服务器返回的数据解析成json就是因为dataType的作用 "success":function(json){ console.log(json); for(var i=0;i<json.length;i++){ //利用append方法将结果追加到div的最后 $("#container").append("<h1>"+ json[i].title + "</h1>"); } }, //对返回错误页面进行处理 //参数一:xmlhttp AJAX的核心对象 它包含了与出错相关的所有信息 //参数二:errorText 对应了错误的描述文本 "error":function(xmlhttp, errorText){ console.log(xmlhttp); console.log(errorText); if(xmlhttp.status == "405"){ alert("无效的请求方式"); //window.location = "http://www.baidu.com"; response.sendRedirect("http://www.baidu.com"); }else if(xmlhttp.status == "404"){ alert("未找到URL资源"); }else if(xmlhttp.status == "500"){ alert("服务器内部错误,请联系管理员"); }else{ alert("产生异常,请联系管理员"); } } }) }); </script> </head> <body> <div id="container"></div> </body> </html>
html页面中的"success":function(json)这里接收的数据其实就是NewsListServlet.java里的 response.getWriter().println(json);;返回的数据吗?但是response.getWriter().println(json);不是会将 结果显示在页面上吗?为什么这里没有显示,而是被"success":function(json)接收到然后循环添加到div里。
11
收起
正在回答
1回答
同学你好,1、success中接收的数据其实就是NewsListServlet.java里的response.getWriter().println(json);返回的数据。
2、response.getWriter.println()表示向浏览器页面中写入内容。使用ajax和json时(异步请求时),success表示接收响应时的处理函数,这里response.getWriter.println(json),json就是返回给浏览器的响应值,所以ajax就会接收了json的内容。
3、success:当请求成功时调用函数,成功后将接收到的内容在不刷新整体页面的情况下向某个标签或者某个div来添加数据的展示。这就是一个ajax请求的过程。
如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手,到Java Web基础,前后端结合助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星