疑问

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里。

jia_蛙 2019-11-18

源自：jQuery与Ajax入门 3-5 Ajax函数的详细说明

收起

1回答

好帮手慕小班回答被采纳获得+3积分 2019-11-18 19:45:10

同学你好，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请求的过程。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

jia_蛙提问者 #1

ajax的本质就是在不刷新整体页面的情况下更新部分页面，当ajax接收到response.getWriter.println()向浏览器页面书写的内容也就是服务器的响应时，就会执行成功接收响应时的处理函数，然后我们在在函数里将获得的数据对页面局部进行更新。这样就体现了ajax的本质。是这样理解吗？

2019-11-18 20:41:14
好帮手慕小班回复提问者 jia_蛙 #2

同学的理解是正确的，很棒呐，继续加油祝：学习愉快~

2019-11-19 09:57:38
jia_蛙提问者回复好帮手慕小班 #3

谢谢老师

2019-11-19 10:14:10