jsp中的代码：
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
("#username").blur(
function() {
//2.创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//如果XMLHttmRequest为true 为非ie浏览器
req = new XMLHttpRequest();
} else {
//如果XMLHttmRequest为false 为ie浏览器
req = new ActiveXObject("Microsoft.XMLHTTP");
}
//3.要发送的地址
var url = "loginServlet?flag=validate";
//4.调用XMLHttpRequest对象的open方法
/** open有三个常用的参数
参数1:请求的方式(get、post)
参数2：请求的路径(url)
参数3:同步(false)异步(true)
/
req.open("post", url, false);
//设定一个请求头信息
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//5.设定回调函数
req.onreadystatechange = updatePage;
//6.发送请求
/*send方法参数可有可无
如果没有参数则代表没有值发往后台
如果有参数则代表有值传递到后台进行处理
*/
req.send("username="+("#sp1").html("用户名重复");
}else{
$("#sp1").html("用户名不重复");
}
}
}
}
});
</script>
<body>
<form action="loginServlet" method="post">
用户名:<input type="text" name="username" id="username">
<span id="sp1"></span>
<br />
密码 :<input type="password" name="password">
<br />
<input type="submit" value="提交">
</form>
</body>
Servlet中的代码：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取标志位flag
String flag = request.getParameter("flag");
if ("validate".equals(flag)) {
// ajax唯一性校验
String username = request.getParameter("username");
boolean val = LoginServiceImpl.getInstance().vali(username);
/**
* ajax请求的数据类型
* 1.text（存文本）
* 2.xml
* 3.json格式
*/
//设置文本类型
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.print(val);
writer.close();
} else {
//正常form表单登录
// 获取表单参数
String username = request.getParameter("username");
String password = request.getParameter("password");
User u = LoginServiceImpl.getInstance().doLogin(username, password);
if (u != null) {
// 证明有用户
} else {
}
}
load()方法提供三个参数：
1.url地址 (必须存在)
2.data：要发送的数据（ 用来发送key/value的值 可有可无）
3.callback：回调函数(可有可无)
load作用：通过ajax请求从服务器加载数据，把返回的数据放到指定的元素中
代码
（1）load只写一个参数 NewFile.html代表一个静态页面中的内容
<script type="text/javascript">
("#btn").click(function() {
("#text").load("NewFile.html #demo") //获取页面部分内容
});
});
<body>
<input type="button" value="ajax获取" id="btn">
<div id="text"></div>
</body>
（2）load写三个参数
<script type="text/javascript">
("#btn").click(function(){
$("#box1").load("text.jsp",{"username":"张三"},function(responseTest,status,xhr){
alert(responseTest); //返回的文本内容
alert(status); //响应的Http状态(返回是scuess还是error)
alert(xhr.responseText) //返回的文本内容
alert(xhr.readyState);//(4)判断服务器是否完全接收到请求
alert(xhr.status) //(200)代表服务器返回的状态码，完全正确响应
alert.(xhr.statusText)
})
});
});
</script>
<body>
用户：<input type="button" value="ajax获取" id="btn">
<div id="box1"></div>
</body>
（3）ajax最终版本
（post写法）
<script type="text/javascript">
("#username").blur(function() {
("#username").val(),
function(data){//data接收来自后台相应的数据 data是变量
if(data == "true"){
("#sp1").html("不重复");
}
})
});
});
</script>
（ajax写法）
<script type="text/javascript">
("#username").blur(function() {
//method传递方式,url地址必须要有
("#username").val(),
success:function(data){
if(data=="true"){
("#sp1").html("不重复");
}
/* for(var i = 0 ;i<data.length ; i++){
alert(data[i].username)
alert(data[i].age)
} */
}
})
});
});
</script>
<body>
<form action="loginServlet" method="post">
用户名:<input type="text" name="username" id="username">
<span id="sp1"></span>
<br />
密码 :<input type="password" name="password">
<br />
<input type="submit" value="提交">
</form>
</body>
（ajax 中JSON请求数据类型的形式最常用）
/**
* ajax请求的数据类型
* 1.text（存文本）
* 2.xml
* 3.json格式
*/
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.print(val);
writer.close();
//反一个json格式
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print("[{"username":"xc","age":12},{"username":"xsdd","age":15},{"username":"xdsad","age":22}]");
网友评论