大家学习ajax之前写的网页一般都是，提交了信息后就要网页全部重新刷新，这样影响了用户的连续性体验（比如，如果用户在看视频的时候想给视频点赞，如果要重新刷新页面那体验太差了），这是原始的web1.0
所以可以使用ajax来进行局部刷新，这属于web2.0，能提高用户体验
RSS协议：
简易信息聚合（也叫聚合内容）是一种基于XML的标准，在互联网上被广泛采用的内容包装和投递协议。
可以把每一个小块独立起来，每个小块请求每个小块的内容
ajax就是rss的一种实现
对数据进行定制化的处理
ajax可以拿来做局部刷新的
传统web和ajax的区别
ajax有原生ajax和jquery封装好的ajax，我不会原生的，所以这里只记录jquery的ajax了
jquery中发起ajax请求的最常用的三种方式有
- $.get(url,[data],[请求成功后应该执行的函数],[dataType])
其中[]中的是可填选项 - $.post(url,[data],[请求成功后应该执行的函数],[dataType])
- $.ajax()
这里详细讲下$.ajax()
$.ajax({
"url":"url", //要提交的url路径
"type":"type", //发送请求的方式
"data":data, //要传送到服务器的数据，后面讲
"dataType":"type", //指定服务器返回的数据类型
"async":true, //是否异步，默认是异步
"success":function(result){
}, //请求成功后要执行的function
"error":function(){
} //请求失败执行的function
})
Json
是一种轻量级数据交换格式，用户服务器和客户端之间传递数据
Json的优点：轻量级，结构简单，易于解析
定义json对象：
var jsonObject={"key":value,"key":value,"key":value};
定义json对象的数组
var userArray=[
{"id":"1","name":"admin1","password":"0000"},
{"id":"2","name":"admin2","password":"1111"},
{"id":"3","name":"admin3","password":"2222"}
]
下面附一个只有前端没有后端的，创建json对象（和json数组）把json（和json数组）输入到页面里的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="user">
<div id="id"></div>
<div id="name"></div>
<div id="password"></div>
</div>
<div id="str1">
<ul id="str1-ul">
</ul>
</div>
<select id="str2-select">
</select>
<table id="userArray" border="2px">
<tr>
<td>ID</td>
<td>userName</td>
<td>passWord</td>
</tr>
</table>
</body>
<script>
var user={"id":1,"name":"zhangsan","password":"0000"};
$("#id").html("userid: "+user.id);
$("#name").html("userName: "+user.name);
$("#password").html("userPassWord: "+user.password);
var countArray=["china"," America","russian"];
for (var i=0;i<countArray.length;i++){
var li="<li>"+countArray[i]+"</li>";
$("#str1-ul").append(li);
}
//调用jqurey数组
var $countArray=$(countArray);
$countArray.each(function () {
var li="<option>"+this+"</option>";
$("#str2-select").append(li);
})
var userArray=[
{"id":"1","name":"admin1","password":"0000"},
{"id":"2","name":"admin2","password":"1111"},
{"id":"3","name":"admin3","password":"2222"}
]
var $userArray=$(userArray);
$userArray.each(function () {
var td1="<td>"+this.id+"</td>";
var td2="<td>"+this.name+"</td>";
var td3="<td>"+this.password+"</td>";
$("#userArray").append("<tr>"+td1+td2+td3+"</tr>");
// $("#userArray").append("<tr>"+"<td>"+this.id+"</td>"+"<td>"+this.name+"</td>"+"<td>"+this.password+"</td>"+"</tr>");
})
</script>
</html>
页面结果
接下来是，在servlet中获取数据库数据然后使用StringBuffer写成json的格式并输出的代码(输出单个和多个)
servlet中的代码
这里要用了json的jar包，在这看着下吧
添加链接描述
package servlet;
import com.alibaba.fastjson.JSON;
import pojo.News;
import serverce.NewsServerce;
import serverceImpl.NewsServerceImpl;
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.io.PrintWriter;
import java.util.List;
@WebServlet(name = "/showNews", value = "/showNews")
public class showNews extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String title=request.getParameter("title");
News n=new News();
n.setTitle(title);
System.out.println(n.getTitle());
NewsServerce newsServerce=new NewsServerceImpl();
News news=newsServerce.getNewsByTitle(n);
System.out.println(news.getTitle());
PrintWriter out=response.getWriter();
List<News> list=newsServerce.getPageList(1,4);
request.setAttribute("list",list);
StringBuffer json=new StringBuffer("[");
for (int i=0;i<list.size();i++){
News news1=list.get(i);
String jason="{\"title\":\""+news1.getTitle().replaceAll("\"","'")+"\",\"content\":\""+news1.getContent().replaceAll("\"","'")+"\"}";
json.append(jason);
if (i<list.size()-1){
json.append(",");
}
}
json.append("]");
System.out.println(json.toString());
out.print(JSON.toJSONString(news));
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
使用的分层开发，其他的代码和结构可以看
添加链接描述
这里的
News news=newsServerce.getNewsByTitle(n);
返回的是一个news对象，
这里的
List<News> list=newsServerce.getPageList(1,4);
返回的是一个，页码为1，一页为4个news对象的list，这是之前写分页写的方法，这里面数字可以自己修改
这里使用一个循环在循环里用StringBuffer的append方法来添加字符串来拼出json的结构
其中的replaceAll(“”“,”'")是为了防止数据库中的数据万一是双引号开头，我们就给它replace成单引号
json对象的数组中每个json(除了最后一个)后面都有一个逗号，所以用一个if来判断然后再拼上逗号
StringBuffer json=new StringBuffer("[");
for (int i=0;i<list.size();i++){
News news1=list.get(i);
String jason="{\"title\":\""+news1.getTitle().replaceAll("\"","'")+"\",\"content\":\""+news1.getContent().replaceAll("\"","'")+"\"}";
json.append(jason);
if (i<list.size()-1){
json.append(",");
}
}
json.append("]");
out.print()；里的参数就是把servlet里的这个参数传到ajax里的那个succes的函数里参数里，也就是function(data)里的data
然后是页面里的Jquery的ajax代码
<%--
Created by IntelliJ IDEA.
User: 王诗韵
Date: 2022-07-15
Time: 1:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,body{
height:100%;
}
body{
margin-left: 10%;
}
#xia{
margin:0%;
width: 80%;
height: 30%;
background-color: cadetblue;
}
</style>
<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="/js/temp1.js"></script>
</head>
<body>
<div id="xia">
下
请输入新闻名<br>
<form>
<input type="text" name="title" value="" id="title"><span id="temp">。</span><br>
<button type="button" onclick="sub()">按钮</button>
</form>
</div>
</body>
<script>
jQuery(document).ready(function () {
});
function sub(){
var title=$("#title").val()
$.ajax ({
"url":"showNews",
"data": {"title": title},
"type":"get",
// "dataType":"json",
"success":function (data) {
$("#temp").html(data);
},
"error":function () {
alert("false");
}
});
}
</script>
</html>
之前要说的那个data:
如果是get请求方式可以直接再url后面拼，我这里用的是带json数据的方法
这里有三种方法详解
添加链接描述
效果（单独的那个getNewsByTitle的）
循环用StringBuffer拼的那一个的效果
可以使用添加链接描述
来校验JSON格式是否正确
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
