WEB22_Js原生Ajax和Jquery的Ajax 柔光的暖阳◎ 2022-03-01 08:16 203阅读 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); 注意:对象格式和数组格式可以互相嵌套 var json = { "baobao":[ {"name":"小双","age":28,"addr":"扬州"}, {"name":"建宁","age":18,"addr":"紫禁城"}, {"name":"阿珂","age":10,"addr":"山西"}, ] }; //娶name = 建宁 alert(json.baobao[1].name); //取addr 山西 alert(json.baobao[2].addr); 注意: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> <!-- jquery倒库 --> <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关键部分: <script type="text/javascript"> $(function(){ //为输入框绑定事件 $("#username").blur(function(){ //1、失去焦点获得输入框的内容 var usernameInput = $(this).val(); //2、去服务端校验该用户名是否存在---ajax $.post( "${pageContext.request.contextPath}/checkUsername", {"username":usernameInput}, function(data){ var isExist = data.isExist; //3、根据返回的isExist动态的显示信息 var usernameInfo = ""; if(isExist){ //该用户存在 usernameInfo = "该用户名已经存在"; $("#usernameInfo").css("color","red"); }else{ usernameInfo = "该用户可以使用" $("#usernameInfo").css("color","green"); } $("#usernameInfo").html(usernameInfo); }, "json" ); }); }); </script> ![在这里插入图片描述][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"> <!-- Brand and toggle get grouped for better mobile display --> <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
还没有评论,来说两句吧...