AJAX学习
2018-07-13 本文已影响0人
小猪Harry
一个AJAX的项目，用来验证用户名是否存在。AJAX可以在不清空其他项（不跳转其他页面的情况下），将需要校验的信息和结果返回。
<%--
Created by IntelliJ IDEA.
User: Think
Date: 2018/7/13
Time: 22:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function checkUser() {
var username_id = document.getElementById("username_id");
//AJAX命令行
var ajax = new XMLHttpRequest();
ajax.open("post","valid.do",true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send("username=" + username_id.value);
ajax.onload = function () {
var valid_info = document.getElementById("valid_info");
if(ajax.responseText=="0")
{
valid_info.innerHTML="可以注册";
}
else
{
valid_info.innerHTML="用户已存在";
}
}
}
</script>
</head>
<body>
<form method="post" action="${pageContext.request.contextPath}/valid.do">
邮箱：<input type="text">
生日：<input type="text">
用户名：<input type="text" id="username_id" name="username" onblur="checkUser()">
<span id="valid_info" style="color: red"></span>
密码：<input type="password">
<input type="submit" value="发送">
</form>
</body>
</html>
package com.zhu.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;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Think on 2018/7/13.
*/
@WebServlet(name = "validServlet",urlPatterns = "/valid.do")
public class validServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> person = new ArrayList<>();
person.add("zhangsan");
person.add("lisi");
String strName = request.getParameter("username");
PrintWriter printWriter = response.getWriter();
if(!person.contains(strName))
{
printWriter.print("0");//这里不能是println，因为那样就是返回0加回车了
}
else
{
printWriter.print("1");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
运行结果：
image.png
image.png
另一个例子：通过AJAX得到一个随机数。可以不清空text文本内容即返回随机数。
<%--
Created by IntelliJ IDEA.
User: Think
Date: 2018/7/13
Time: 22:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function getRNum() {
var text = document.getElementById("text");
//AJAX命令行
var ajax = new XMLHttpRequest();
ajax.open("get","random.do?number="+text.value,true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send();
ajax.onload = function () {
var num = document.getElementById("num");
num.innerHTML=ajax.responseText;
}
}
</script>
</head>
<body>
<input type="text" id="text">
<button id="btn" onclick="getRNum();">得到一个随机数</button>
<div id="num"></div>
</body>
</html>
package com.zhu.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;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/**
* Created by Think on 2018/7/13.
*/
@WebServlet(name = "validServlet",urlPatterns = "/random.do")
public class validServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String num = request.getParameter("number");
Random random = new Random();
int rNum = random.nextInt(Integer.parseInt(num));
response.getWriter().println(rNum);
}
}
运行结果：
image.png
