Servlet配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>AjaxServer</servlet-name>
<servlet-class>org.zln.ajax.servlet.AjaxServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServer</servlet-name>
<url-pattern>/AjaxServletDo.do</url-pattern>
</servlet-mapping>
</web-app>
Servlet编写
package org.zln.ajax.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;
/**
* Created by coolkid on 2015/6/7 0007.
*/
public class AjaxServer extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
//取参数信息
String name = request.getParameter("name");
//输入校验
if(name == null || name.length() == 0){
out.println("用户名不能为空");
} else{
//逻辑校验与业务处理
if(name.equals("wangxingkui")){
out.println("用户名[" + name + "]已经存在，请使用其他用户名");
} else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册");
}
}
/*这些发往HTML的数据会被ajax的回调函数处理*/
out.println("<br/><a href=\"ajax.html\">返回校验页面</a>");
} catch(Exception e){
e.printStackTrace();
}
//返回更新数据（而不是跳转到新的视图）
}
}
html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>itcast.cn 用户名校验ajax实例</title>
<script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script>
</head>
<body>
itcast.cn 用户名校验的ajax实例，请输入用户名：<br/>
<!-- ajax方式下，不需要使用表单提交数据 -->
<input type="text" id="userName" value=""/>
<input type="button" value="校验" onclick="verify(‘userName‘)"/><br/>
<!-- div空间用于显示ajax处理结果 -->
<div id="result"></div>
</body>
</html>
js
/**
* Created by coolkid on 2015/6/7 0007.
*/
/*用户名校验*/
function verify(id){
//获取文本框内容
var userNameObj = $("#"+id);
var userNameValue = userNameObj.val();
//发送数据给Servlet
//使用jQuery的XMLHTTPRequest对象的get请求封装
$.get("/Ajax/AjaxServletDo.do?name="+userNameValue,null,callBack);
}
//回调函数
function callBack(data){
//接收服务端返回数据
$("#result").html(data);
//显示动态返回的数据
}
js的简化写法
/**
* Created by coolkid on 2015/6/7 0007.
*/
/*用户名校验*/
function verify(id){
//发送数据给Servlet
//使用jQuery的XMLHTTPRequest对象的get请求封装
$.get("/Lesson5_AJAX_Demo1/AjaxServletDo.do?name="+$("#"+id).val(),null,function(data){
$("#result").html(data);
});
}
时间： 2024-09-29 06:00:31