image.png
image.png
//News.java
package com.imooc.ajax;
public class News {
private String title;
private String date;
private String source;
private String content;
public News(String title, String date, String source, String content) {
super();
this.title = title;
this.date = date;
this.source = source;
this.content = content;
}
public News() {
}
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;
}
}
//NewsListServlet.java
package com.imooc.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;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public NewsListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String type = request.getParameter("t");
List newsList = new ArrayList();
if(type != null && type.equals("pypl")) {
newsList.add(new News("PYPL:全球編程語言排行榜5月","2018-5-1","PYPL","..."));
newsList.add(new News("PYPL:全球編程語言排行榜6月","2018-5-1","PYPL","..."));
newsList.add(new News("PYPL:全球編程語言排行榜7月","2018-5-1","PYPL","..."));
newsList.add(new News("PYPL:全球編程語言排行榜8月","2018-5-1","PYPL","..."));
}else if(type == null || type.equals("tiobe")) {
newsList.add(new News("TIOBE:全球編程語言排行榜5月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIOBE:全球編程語言排行榜6月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIOBE:全球編程語言排行榜7月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIOBE:全球編程語言排行榜8月","2018-5-1","TIOBE","..."));
}
String json = JSON.toJSONString(newsList);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
//jquery_news.html
<!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(){ //頁面就緒函數(shù)，頁面加載完成后執(zhí)行function里面的代碼
$.ajax({
"url":"/Ajax/news_list",
"type":"get",//post 依然會自動用表單傳遞參數(shù)
"data":"t=pypl",
//對于data多個參數(shù)：
//1."data":"t=pypl&abc=123&uu=777",
//2."data":{"t":"pypl","abc":"123","uu":"777"}, //推薦
"dataType":"json",//text缎罢，則不會解析為json
"success":function(json){ //對響應的json文本自動進行解析
console.log(json);
for(var i=0;i<json.length;i++){
$("#container").append("<h1>" + json[i].title + "</h1>");//追加到指定元素中
}
},
"error":function(xmlhttp,errorText){
console.log(xmlhttp);
console.log(errorText);
if(xmlhttp.status == "405"){
alert("無效的請求方法");
}else if(xmlhttp.status == "404"){
alert("未找到URL資源");
}else if(xmlhttp.status == "500"){
alert("服務器內部錯誤卑吭，請聯(lián)系管理員");
}else{
alert("產生異常，請聯(lián)系管理員");
}
}
})
})
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
地址欄輸入http://localhost:8080/Ajax/jquery_news.html
一個小練習
image.png
package com.imooc.ajax;
import java.util.List;
public class Song {
private List popMusic;
private List classMusic;
private List rockMusic;
public Song() {
}
public Song(List popMusic, List classMusic, List rockMusic) {
super();
this.popMusic = popMusic;
this.classMusic = classMusic;
this.rockMusic = rockMusic;
}
public List getPopMusic() {
return popMusic;
}
public void setPopMusic(List popMusic) {
this.popMusic = popMusic;
}
public List getClassMusic() {
return classMusic;
}
public void setClassMusic(List classMusic) {
this.classMusic = classMusic;
}
public List getRockMusic() {
return rockMusic;
}
public void setRockMusic(List rockMusic) {
this.rockMusic = rockMusic;
}
}
package com.imooc.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;
/**
* Servlet implementation class SongServlet
*/
@WebServlet("/song")
public class SongServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SongServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String type = request.getParameter("type");
List<String> popList = new ArrayList();
popList.add("稻香");
popList.add("晴天");
popList.add("告白氣球");
List<String> classicList = new ArrayList();
classicList.add("千千厥歌");
classicList.add("傻女");
classicList.add("七友");
List<String> rockList = new ArrayList();
rockList.add("一塊紅布");
rockList.add("假行僧");
rockList.add("新長城路上的搖滾");
Song songs = new Song(popList,classicList,rockList);
String json = null;
if(type.equals("pop")) {
json = JSON.toJSONString(songs.getPopMusic());
}else if(type.equals("classic")) {
json = JSON.toJSONString(songs.getClassMusic());
}else if(type.equals("rock")) {
json = JSON.toJSONString(songs.getRockMusic());
}else {
System.out.println("類型錯誤");
return;
}
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" name="pop" value="流行歌曲">
<input type="button" name="classic" value="經典歌曲">
<input type="button" name="rock" value="搖滾歌曲">
<div id="container"></div>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("input[name='pop']").click(function(){
$.ajax({
"url":"/Ajax/song",
"type":"get",
"data":"type=pop",
"dataType":"json",
"success":function(json){
console.log(json);
$("#container").text("");
for(var i=0;i<json.length;i++){
$("#container").append("<h1>"+json[i]+"</h1>");
}
}
});
});
$("input[name='classic']").click(function(){
$.ajax({
"url":"/Ajax/song",
"type":"get",
"data":"type=classic",
"dataType":"json",
"success":function(json){
console.log(json);
$("#container").text("");
for(var i=0;i<json.length;i++){
$("#container").append("<h1>"+json[i]+"</h1>");
}
}
});
});
$("input[name='rock']").click(function(){
$.ajax({
"url":"/Ajax/song",
"type":"get",
"data":"type=rock",
"dataType":"json",
"success":function(json){
console.log(json);
$("#container").text("");
for(var i=0;i<json.length;i++){
$("#container").append("<h1>"+json[i]+"</h1>");
}
}
});
});
</script>
</body>
</html>
