ajax问题

首页课程实战体系课手记专栏慕课教程

ajax问题

来源：2-7 利用Ajax实现新闻列表

qq_a污骨_0

2019-03-05 14:39:23

有两个问题

1.html中date时间这一项不识别，如图

2.页面不显示数据，我用下面的代码检测了一下，是“1”，是哪里出了问题？

else if (xmlhttp.readyState == 4) {
        console.log("4");
    } else if (xmlhttp.readyState == 3) {
        console.log("3");
    } else if (xmlhttp.readyState == 2) {
        console.log("2");
    } else if (xmlhttp.readyState == 1) {
        console.log("1");
    } else if (xmlhttp.readyState == 0) {
        console.log("0");
    }

下面是所有的代码

NewListServlet.java

package ajax;

        import com.alibaba.fastjson.JSON;

        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;
        import java.util.ArrayList;
        import java.util.List;


@WebServlet(name = "NewListServlet",urlPatterns = "/news_list")
public class NewListServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List list = new ArrayList();
        list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
        list.add(new News("TIOBE:2018年5月份全球编程语言排行榜", "2018-5-1", "TIOBE", "..."));
        String json = JSON.toJSONString(list);//将java对象序列化生成字符串
        System.out.println(json);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println(json);
    }
}

News.java

package ajax;


public class News {
    private String title;
    private String date;
    private String source;
    private String content;

    public News() {
    }

    public News(String title, String date, String source, String content) {
        this.title = title;
        this.date = date;
        this.source = source;
        this.content = content;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getSource() {
        return source;
    }

    public void setSource(String source) {
        this.source = source;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

news.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript">
 //1.创建XmlHttpRequest
 var xmlhttp;
 if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
 } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
    //2.发送Ajax请求
 xmlhttp.open("GET", "/ajax/news_list", true);
 xmlhttp.send();
 //3.处理服务器响应
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var text = xmlhttp.responseText;
 console.log(text);
 var json = JSON.parse(text);
 console.log(json);
 var html = "";
 for (var i = 0; i < json.length; i++) {
            var news = json[i];
 html = html + "<h1>" + news.title + "</h1>";
 html = html + "<h2>" +news.date+ "&nbsp;" + news.source + "</h2>"
 html = html + "<hr/>"
 }
        document.getElementById("container").innerHTML = html;
 }
//    else if (xmlhttp.readyState == 4) {
//            console.log("4");
//        } else if (xmlhttp.readyState == 3) {
//            console.log("3");
//        } else if (xmlhttp.readyState == 2) {
//            console.log("2");
//        } else if (xmlhttp.readyState == 1) {
//            console.log("1");
//        } else if (xmlhttp.readyState == 0) {
//            console.log("0");
//        }

</script>
</body>
</html>

写回答

2回答