缘由
百度注册页面
用户一输入，就能知道这用户名有没有注册，这坑定是到用户的数据库里面查询出来的结果，所以，它坑定是在鼠标离开那个框框之后就开始验证查询了；这，看着高大上，我也想学习这样的功能或者说是这样的技术
崇拜ing
开始了解
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。
开始学习
说干就干，听说Jquery很好用，而且还能整ajax，冲冲冲ing
冲冲冲
首先，魔爪伸向小破站开始白嫖，jaax+json: 白嫖的这个up.
万年的学习终于修成正果
- 学习jquery获取页面元素的值
-jquery基础知识
找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。jQuery 代码:$("div > p");
设置页面背景色。jQuery 代码:$(document.body).css( "background", "black" );
-jquery的选择器
查找 ID 为"myDiv"的值。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv").val();
- 学习ajax发送异步请求
- get请求和post请求
需求
当我们在输入框中输入完成后，鼠标拿开或者点击输入框以外的地方的时候，我们就会进行异步请求进行验证数据的可靠性，来判断输入的用户已智能提示，类似百度注册页面的验证。
核心代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>123</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<body>
<h2>ajax1</h2>
<input type="text" onblur="txt()" id="yyy"/>
<span id="hui"></span>
</body>
<script type="text/javascript">
function txt(){
$.post({
url:"#",
data:{name:$("#yyy").val()},
success:function(data){
alert(data);
},
dataType:"json"//指定数据格式为json
});
}
</script>
</html>
效果展示
- jsp传值到servlet到servlet请求数据库来完成查询，返回知道页面上。
package com.qf.lr.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qf.lr.dao.userdao;
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.util.HashMap;
import java.util.Map;
@WebServlet("/ajax")
public class Ajax_name extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// resp.setContentType("text/html;charset=utf-8");
resp.setContentType("application/json;charset=utf-8");
String name=req.getParameter("name");
Map<String,Object> map=new HashMap<String, Object>();
userdao dao=new userdao();
if(dao.query(name)!=null){
map.put("cg",true);
map.put("msg","太奶了，用户名不可用哟！");
}else {
map.put("cg",false);
map.put("msg","真棒！用户名可用");
}
// map=>json
ObjectMapper mapper= new ObjectMapper();
// 将数据传递给客户端
mapper.writeValue(resp.getWriter(),map);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>123</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<body>
<h2>ajax1</h2>
<input type="text" onblur="txt()" id="yyy"/>
<span id="hui"></span>
</body>
<script type="text/javascript">
function txt(){
$.post({
url:"ajax",
data:{name:$("#yyy").val()},
success:function(data){
var span=$("#hui");
if(data.cg){
span.html(data.msg);
span.css("color","green");
}else{
span.html(data.msg);
span.css("color","red");
}
},
dataType:"json"//指定数据格式为json
});
}
</script>
</html>
期望的结果：
这个用户名在数据库中的时候，输入框后面显示绿色的太奶了，用户名不可用哟！，当这个用户名在数据库中没有的时候，输入框后面显示红色的真棒！用户名可用
开始展示
初始浏览器加载页面
用户名在数据库中不存在
用户名在数据库中存在
到这里该写的都写完了！
偷偷的开心
纯属一大采采大学的手笔，大佬们不喜勿喷，请多多指教！
