JQuery学习27篇(ajax之json)

最新推荐文章于 2023-10-20 23:35:27 发布

程宇寒

最新推荐文章于 2023-10-20 23:35:27 发布

阅读量236

点赞数

文章标签： JQuery javascript js ajax json

本文链接：https://blog.csdn.net/czh500/article/details/103788193

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习27篇(ajax之json)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习27篇(ajax之json)</h3>
	<input id="readNews" type="button" value="看新闻">
	<br/><br/>
	<input id="clearNews" type="button" value="清空新闻">
    <ul id="newsList">
    </ul>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//以下写法都可以，自己挑一种
/*
$('#readNews').click(function(){
	var url = 'TestJson';
// 	$.get(url, function(serverReturnData){
// 		console.log(serverReturnData, typeof serverReturnData);//string类型
// 	});
	$.get(url, function(serverReturnData){
		console.log(serverReturnData, typeof serverReturnData);//object类型
		console.log(serverReturnData.length);
		//面向过程编程
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li>' + serverReturnData[index] + '</li>');
		}
	}, 'json');
});
*/

/*
$('#readNews').click(function(){
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
// 		console.log(serverReturnData, typeof serverReturnData);//object类型
// 		console.log(serverReturnData.length);
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		//面向函数编程
		$('#newsList li').each(function() {
			//会破坏serverReturnData
// 			var returnValue1 = serverReturnData.shift();
			//js中的innerHTML会把undefined添加到标签中
// 			this.innerHTML = returnValue1;
// 			console.log(returnValue1, typeof returnValue1, serverReturnData);
			var returnValue2 = serverReturnData.shift();
			//jquery中的html()函数不会把undefined添加到标签中
			$(this).html(returnValue2);
			console.log(returnValue2, typeof returnValue2, serverReturnData);
		});
	}, 'json');
});
*/


/*
$('#readNews').click(function(){
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		//面向函数编程
		$('#newsList li').each(function() {
			//会破坏serverReturnData
			$(this).html(serverReturnData[0]);
				serverReturnData.shift();
		});
	}, 'json');
});
*/

/*
$('#readNews').click(function(){
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		//面向函数编程
		$('#newsList li').each(function() {
			//会破坏serverReturnData
			$(this).html(serverReturnData.splice(0, 1)[0]);
		});
	}, 'json');
});
*/

/*
$('#readNews').click(function(){
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		var index = 0;
		//面向函数编程
		$('#newsList li').each(function() {
			//如果不想破坏serverReturnData的话，可以用如下写法
			$(this).html(serverReturnData[index++]);
		});
	}, 'json');
});
*/

/*
$('#readNews').click(function(){
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		var index = 0;
		//面向函数编程
		$('#newsList li').each(function() {
			//如果不想破坏serverReturnData的话，可以用如下写法
			$(this).html(serverReturnData[index]);
			index++; //++index;也可以
		});
	}, 'json');
});
*/

$('#readNews').click(function(){
	$('#newsList').html(''); //先清空新闻列表
	var url = 'TestJson';
	$.get(url, function(serverReturnData){
		for (var index = 0; index < serverReturnData.length; index++) {
			$('#newsList').append('<li></li>');
		}
		var index = 0;
		//面向函数编程
		$('#newsList li').each(function() {
			//如果不想破坏serverReturnData的话，可以用如下写法
			console.log('----------' + index);
			$(this).html(serverReturnData[index]);
			++index;
			console.log('**********' + index);
		});
	}, 'json');
});

//清空新闻列表
$('#clearNews').click(function(){
	$('#newsList').html('');
});
</script>
</html>

package com.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 使用jquery的ajax(返回json数据)
 */
@WebServlet("/TestJson")
public class TestJson extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		//为了省事，我就自己造一个简单点的json数组,数组作为json对象,返回给浏览器客户端
		String news = "[\"杨幂被爆新恋情\", \"李现又上热搜\", \"杨幂被爆分手\"]";
		System.out.println(news);
		PrintWriter pw = response.getWriter();
		pw.print(news);//返回给浏览器客户端
		pw.flush();
		pw.close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习27篇(ajax之json)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery学习27篇(ajax之json)</title><link rel="stylesheet" type="text/css" href="inpu...
复制链接

扫一扫