WEB22_Js原生Ajax和Jquery的Ajax

柔光的暖阳◎ 2022-03-01 08:16 264阅读 0赞

## 一、Ajax概述 ##

### 1．什么是同步，什么是异步 ###

#### 同步现象： ####

客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态

#### 异步现象： ####

客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

### 2．Ajax的运行原理 ###

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面1功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]

## 二、js原生的Ajax技术（了解） ##

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1）创建Ajax引擎对象
    
    2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
    
    3）绑定提交地址
    
    4）发送请求
    
    5）接受响应数据

演示下同步和异步的区别：  
ajax.html：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    
    	function fn1(){
    		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
    		var xmlHttp = new XMLHttpRequest();
    		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
    		xmlHttp.onreadystatechange = function(){
    			if(xmlHttp.readyState==4&&xmlHttp.status==200){
    				//5、接受相应数据
    				var res = xmlHttp.responseText;
    				document.getElementById("span1").innerHTML = res;
    			}
    		}
    		//3、绑定地址
    		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
    		//4、发送请求
    		xmlHttp.send();
    		
    	}
    	function fn2(){
    		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
    		var xmlHttp = new XMLHttpRequest();
    		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
    		xmlHttp.onreadystatechange = function(){
    			if(xmlHttp.readyState==4&&xmlHttp.status==200){
    				//5、接受相应数据
    				var res = xmlHttp.responseText;
    				document.getElementById("span2").innerHTML = res;
    			}
    		}
    		//3、绑定地址
    		xmlHttp.open("POST","/WEB22/ajaxServlet",false);
    		//4、发送请求
    		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		xmlHttp.send("name=wangwu");	
    	}
    </script>
    	<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
    	<br>
    	<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
    	<br>
    	<input type="button" value="测试按钮" onclick="alert()">
    </head>
    <body>
    
    </body>
    </html>

Servlet：

package com.itheima.ajax;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class AjaxServlet extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		try {
    			Thread.sleep(5000);
    	     } catch (InterruptedException e) {
    	             e.printStackTrace();
    	     }
    	     response.getWriter().write(Math.random()+"");
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

运行结果：  
![在这里插入图片描述][20190322092835751.png]  
点击同步按钮了之后，就不能再点击测试按钮了，5秒之后结果出来；点击异步按钮之后，还能点击测试按钮，5秒之后结果也能出来。  
注意：如果是post提交  
在发送请求之前设置一个头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

总结：所用异步访问都是浏览器内置的ajax引擎。

## 三、Json数据格式（重要） ##

json是一种与语言无关的数据交换的格式，作用：  
使用ajax进行前后台数据交换  
移动端与服务端的数据交换

### 1．Json的格式与解析 ###

json有两种格式：  
对象格式：\{“key1”:obj,”key2”:obj,”key3”:obj…\}  
数组/集合格式：\[obj,obj,obj…\]  
例如：user对象 用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List 用json数据格式表示

[{"pid":"10","pname":"小米4C"},{},{}]

var persons = [
                        {"firstname":"张","lastname":"三丰","age":100},
                        {"firstname":"李","lastname":"四","age":25}
                   ];
    //取出 firstname=李
    alert(persons[1].firstname);
    //取100
    alert(persons[0].age);

注意：对象格式和数组格式可以互相嵌套

注意：json的key是字符串 jaon的value是Object  
json的解析：  
json是js的原生内容，也就意味着js可以直接取出json对象中的数据

### 2．Json的转换插件 ###

将java的对象或集合转成json形式字符串  
json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。  
常用的json转换工具有如下几种：  
1）jsonlib  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]  
全部导入库中

JSONArray fromObject = JSONArray.fromObject(productList);
    		String string = fromObject.toString();
    		System.out.println(string);

2）Gson：google  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]

Gson gson = new Gson();
    		String json = gson.toJson(productList);
    		System.out.println(json);

3）fastjson：阿里巴巴  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]

## 四、JQuery的Ajax技术 ##

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：

$.get(url, [data], [callback], [type])
    $.post(url, [data], [callback], [type])

其中：  
url：代表请求的服务器端地址  
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）  
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）  
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）  
常用的返回类型：text、json、html等  
看下例子：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    	function fn1(){
    		//get异步访问
    		$.get(
    			"/WEB22/ajaxServlet2",//url地址
    			{"name":"张三","age":25},//请求参数
    			function(data){//执行成功后的回调函数
    				//{\"name\":\"汤姆\",\"age\":21}
    				alert(data.name);
    			},
    			"json"
    		);
    	}
    	function fn2(){
    		//post异步访问
    		$.post(
    			"/WEB22/ajaxServlet2",//url地址
    			{"name":"李四","age":25},//请求参数
    			function(data){//执行成功后的回调函数
    				//{\"name\":\"汤姆\",\"age\":21}
    				alert(data.name);
    			},
    			"json"
    		);
    	}
    	
    </script>
    </head>
    <body>
    	<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
    	<br>
    	<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
    
    </body>
    </html>

Servlet：

package com.itheima.ajax;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class AjaxServlet2 extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		String name = request.getParameter("name");
    		String age = request.getParameter("age");
    		
    		System.out.println(name+"  "+age);
    		
    		
    		//java代码只能返回一个json格式的字符串
    		//解决网页中文显示乱码问题
    		response.setContentType("text/html;charset=UTF-8");
    		response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

get异步访问  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]  
post异步访问  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]

### 3）$.ajax( \{ option1:value1,option2:value2… \} ); ---- 以后在掌握 ###

常用的option有如下：  
async：是否异步，默认是true代表异步  
data：发送到服务器的参数，建议使用json格式  
dataType：服务器端返回的数据类型，常用text和json  
success：成功响应执行的函数，对应的类型是function类型  
type：请求方式，POST/GET  
url：请求服务器端地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]  
请求失败  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]

## 五、异步校验用户名是否存在 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]  
Jsp关键部分：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]  
servlet

package com.itheima.web;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.itheima.service.UserService;
    
    
    public class CheckUsername extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//获得要校验的用户名
    		String username = request.getParameter("username");
    		
    		//传递username到service
    		UserService service = new UserService();
    		boolean isExist = false;
    		try {
    			isExist = service.checkUsername(username);
    		} catch (Exception e) {
    			System.out.println(e);
    		}
    		//java代码只能返回一个json格式的字符串
    		response.getWriter().write("{\"isExist\":"+isExist+"}");
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

service

package com.itheima.service;
    
    import java.sql.SQLException;
    
    import com.itheima.dao.UserDao;
    
    public class UserService {
    
    	public boolean checkUsername(String username) throws SQLException {
    		//每一复杂业务,传到dao层
    		UserDao dao = new UserDao();
    		Long isExist = dao.checkUsername(username);
    		return isExist > 0 ? true:false;
    	}
    
    }

dao

package com.itheima.dao;
    
    import java.sql.SQLException;
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.ScalarHandler;
    
    import com.itheima.utils.DataSourceUtils;
    
    public class UserDao {
    	//条件查询此username是否存在
    	public Long checkUsername(String username) throws SQLException {
    		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
    		String sql = "select count(*) from user where username=?";
    		Long query = (Long) runner.query(sql, new ScalarHandler(),username);
    		return query;
    	}
    
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]

## 六、站内搜索 ##

前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    
    <div class="container-fluid">
    	<div class="col-md-4">
    		<img src="img/logo2.png" />
    	</div>
    	<div class="col-md-5">
    		<img src="img/header.png" />
    	</div>
    	<div class="col-md-3" style="padding-top:20px">
    		<ol class="list-inline">
    			<li><a href="login.jsp">登录</a></li>
    			<li><a href="register.jsp">注册</a></li>
    			<li><a href="cart.jsp">购物车</a></li>
    			<li><a href="order_list.jsp">我的订单</a></li>
    		</ol>
    	</div>
    </div>
    
    
    <div class="container-fluid">
    	<nav class="navbar navbar-inverse">
    		<div class="container-fluid">
    			
    			<div class="navbar-header">
    				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    					<span class="sr-only">Toggle navigation</span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    					<span class="icon-bar"></span>
    				</button>
    				<a class="navbar-brand" href="#">首页</a>
    			</div>
    
    			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    				<ul class="nav navbar-nav">
    					<li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
    					<li><a href="#">电脑办公</a></li>
    					<li><a href="#">电脑办公</a></li>
    					<li><a href="#">电脑办公</a></li>
    				</ul>
    				<form class="navbar-form navbar-right" role="search">
    				    <div class="form-group" style="position:relative">
    				        <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
    				        <div id="showDiv" style="display:none; position:absolute;z-index:1000;background:#fff; width:179px;border:1px solid #ccc;">
    				
    				        </div>
    				    </div>
    				    <button type="submit" class="btn btn-default">Submit</button>
    				</form>
    				
    				<script type="text/javascript">
    				    function overFn(obj){
    				        $(obj).css("background","#DBEAF9");
    				    }
    				    function outFn(obj){
    				        $(obj).css("background","#fff");
    				    }
    				
    				    function clickFn(obj){
    				        $("#search").val($(obj).html());
    				        $("#showDiv").css("display","none");
    				    }
    				    function searchWord(obj){
    				        //1、获得输入框的输入的内容
    				        var word = $(obj).val();
    				        //2、根据输入框的内容去数据库中模糊查询---List<Product>
    				        var content = "";
    				        $.post(
    				            "${pageContext.request.contextPath}/searchWord",
    				            {"word":word},
    				            function(data){
    				                //3、将返回的商品的名称 现在showDiv中
    				                //[{"pid":"1","pname":"小米 4c 官方版","market_price":8999.0,"shop_price":8999.0,"pimage":"products/1/c_0033.jpg","pdate":"2016-08-14","is_hot":1,"pdesc":"小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待 官方好好","pflag":0,"cid":"1"}]
    				                if(data.length>0){
    				                    for(var i=0;i<data.length;i++){
    				                        content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
    				                                }
    				                    $("#showDiv").html(content);
    				                    $("#showDiv").css("display","block");
    				                }
    				            },
    				            "json"
    				        );
    				    }
    				</script>
    			</div>
    		</div>
    	</nav>
    </div>

Web层：

package com.itheima.web;
    
    import java.io.IOException;
    import java.sql.SQLException;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.google.gson.Gson;
    import com.itheima.domain.Product;
    import com.itheima.service.ProductService;
    
    import net.sf.json.JSONArray;
    
    public class SearchWordServlet extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		//获得关键字
    		String word = request.getParameter("word");
    		
    		//查询该关键字的所有商品
    		ProductService service = new ProductService();
    		List<Object> productList = null;
    		try {
    			productList = service.findProductByWord(word);
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		
    		//["xiaomi","huawei",""...]
    		
    		//使用json的转换工具将对象或集合转成json格式的字符串
    		/*JSONArray fromObject = JSONArray.fromObject(productList);
    		String string = fromObject.toString();
    		System.out.println(string);*/
    		
    		Gson gson = new Gson();
    		String json = gson.toJson(productList);
    		System.out.println(json);
    		
    		response.setContentType("text/html;charset=UTF-8");
    		
    		response.getWriter().write(json);
    	}
    
    	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    }

Service层：

//根据关键字查询商品
    	public List<Object> findProductByWord(String word) throws SQLException {
    		//因为没有复杂的业务,直接传递请求到dao层
    		ProductDao dao = new ProductDao();
    		return dao.findProductByWord(word);
    	}

Dao层：

//根据关键字查询商品
    	public List<Object> findProductByWord(String word) throws SQLException {
    		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
    		String sql = "select * from product where pname like ? limit 0,8";
    		List<Object> query = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");
    		return query;
    	}

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70]: /images/20220301/76b5fd30698e4984a2c89c91caf6b473.png
[20190322092835751.png]: /images/20220301/fd190c4f392e4aebbbcb82d6984cf6a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 1]: /images/20220301/381665103fdc48a8b54b801717eb255a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 2]: /images/20220301/9ecb81490da449009fbaf0975ea0ec54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 3]: /images/20220301/25402cedf71642fbb70dfa344127b59c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 4]: /images/20220301/41fd9730a30e461a837f1d52c08b0fae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 5]: /images/20220301/92666b5ce618478fbcdbf17932967854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 6]: /images/20220301/15a1c342521d4adbb72bf50b7495f46a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 7]: /images/20220301/6af3567a92604cd291199feef825ccd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 8]: /images/20220301/b64f946540b04f35a06fe2037c23eadf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 9]: /images/20220301/b50753c00d174e50a0216727aceaa4cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 10]: /images/20220301/1f693031dc554e28ac5bf1dba1ac4765.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 11]: /images/20220301/c951fee8e07746c8ac722cd894a7de80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 12]: /images/20220301/d17a3b69637c4ce38fe684c925fefcd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 13]: /images/20220301/46ccafa68c534b879e2ff0d780dd08cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 14]: /images/20220301/f0bbc6780d2241f7bcc78ad800ab251e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 15]: /images/20220301/3c29984798364dc594ee544cb51b66f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 16]: /images/20220301/be97272a818448298477d3b8ee68a75c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 17]: /images/20220301/f5ecf8b345644b2daa0112712fe32d6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgwNzI0Nw_size_16_color_FFFFFF_t_70 18]: /images/20220301/df5a2f1492ba4ada98ae9400e31f1fc8.png