jquery中ajax的基本使用
今天介绍的是普通的ajax使用方法
实现对用户的校验及其登录
效果：
源代码：
jsp页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
div{
width: 300px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<div>
<form action="#">
账号:<input type="text" name="name" id="name"/><br/>
密码:<input type="text" name="pwd" id="pwd"/><br/>
<input type="button" value="登录"/>
</form>
</div>
<script>
$(function () {
$("#name").blur(function () { // 鼠标失去焦点判断
var rs1 = /^[\u4e00-\u9fa5]+$/;
var name = $(this).val();
if(rs1.test(name)){
$(this).css("border-color","blue"); //格式正确边框设置为蓝色
}else{
$(this).css("border-color","red"); //格式错误边框设置为红色
}
});
$("#pwd").blur(function () { // 鼠标失去焦点判断
var rs2 = /^[0-9]+$/;
var pwd = $(this).val();
if(rs2.test(pwd)){
$(this).css("border-color","blue"); //格式正确边框设置为蓝色
}else{
$(this).css("border-color","red"); //格式错误边框设置为红色
}
});
$(":button").click(function () { // 当点击提交提交按钮后，发送AJAX请求
$.ajax({
url:"ajaxServlet", // 请求路径
type:"post", // 请求方式
data:{ // 发送的请求参数
name:$("#name").val(),
pwd:$("#pwd").val()
},
dataType:"text", // 返回值的类型
success:function (data) { // 回调函数
alert(data);
}
});
});
});
</script>
</body>
</html>
Servlet页面：
package com.hnpi.Servlet;
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;
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8"); // 转换编码
String name = "王五"; // 定义用于判断登录的用户名
String pwd = "123"; // 定义用于判断登录的密码
String ajaxName = request.getParameter("name"); // 接收AJAX发送的参数
String ajaxPwd = request.getParameter("pwd");
if(name.equals(ajaxName) && pwd.equals(ajaxPwd)){ // 判断用户名和密码是否正确
response.getWriter().write(ajaxName + "欢迎您！"); // 返回给用户的信息
}else{
response.getWriter().write("用户名或密码错误！");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}