Java后台代码部分：AjaxInfo.java
package web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class AjaxInfo extends HttpServlet{
private static final long serialVersionUID = 2238572939991508891L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String action = req.getParameter("action");
if("checkUserName".equals(action)){
this.checkUserName(req, resp);
}else if("ejld".equals(action)){
this.ejld(req, resp);
}
}
public void checkUserName(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String userName=req.getParameter("username");
JSONObject resultJson=new JSONObject();
if("jack".equals(userName)){
resultJson.put("exist", true);
}else{
resultJson.put("exist", false);
}
PrintWriter out=resp.getWriter();
out.print(resultJson);
out.flush();
out.close();
}
public void ejld(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String shengId=req.getParameter("shengId");
JSONObject resultJson=new JSONObject();
JSONArray jsonArray=new JSONArray();
JSONObject temp=null;
switch(Integer.parseInt(shengId)){
case 1:{
temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 2);temp.put("text", "泰兴");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 3);temp.put("text", "南通");jsonArray.add(temp);
break;
}
case 2:{
temp=new JSONObject();temp.put("id", 4);temp.put("text", "杭州");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 5);temp.put("text", "宁波");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 6);temp.put("text", "温州");jsonArray.add(temp);
break;
}
case 3:{
temp=new JSONObject();temp.put("id", 7);temp.put("text", "济南");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 8);temp.put("text", "烟台");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 9);temp.put("text", "蓬莱");jsonArray.add(temp);
break;
}
}
resultJson.put("rows", jsonArray);
PrintWriter out=resp.getWriter();
out.print(resultJson);
out.flush();
out.close();
}
}
前台：1.登陆验证 checkUserName.html，这里需要用到ok.png和no.png图片，图片我放在最后
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function checkUserName(){
var userName=document.getElementById("username").value;
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");//转换为 json 对象
if(dataObj.exist){
document.getElementById("tip").innerHTML="<img src=‘no.png‘ /> 该用户名已经存在";//这里需要用到no.png图片
}else{
document.getElementById("tip").innerHTML="<img src=‘ok.png‘ /> 该用户名可以使用";//这里需要用到ok.png图片
}
}
}
xmlHttp.open("get","ajax?action=checkUserName&username="+userName,true);
xmlHttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" id="username" name="username" onblur="checkUserName()" /> <font id="tip"></font> </td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password" name="password" /> </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="text" id="password2" name="password2" /> </td>
</tr>
<tr>
<td><input type="submit" value="注册" /></td>
<td><input type="button" value="重置"/></td>
</tr>
</table>
</body>
</html>
前台：2.二级联动 ejld.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadInfo(){
var shengId=document.getElementById("sheng").value;
shi.options.length=0;//删除所有下拉框的选项
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");//转换为 json 对象
for(var i=0;i<dataObj.rows.length;i++){
var o=dataObj.rows[i];
shi.options.add(new Option(o.text,o.id));
}
}
}
xmlHttp.open("get","ajax?action=ejld&shengId="+shengId,true);
xmlHttp.send();
}
</script>
</head>
<body>
省：
<select id="sheng" onchange="loadInfo()">
<option value="1">江苏省</option>
<option value="2">浙江省</option>
<option value="3">山东省</option>
</select>
市：
<select id="shi">
</select>
</body>
</html>
配置：web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>headFirstAjaxJsonChap03</servlet-name>
<servlet-class>web.AjaxInfo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>headFirstAjaxJsonChap03</servlet-name>
<url-pattern>/ajax</url-pattern>
</servlet-mapping>
</web-app>
注意：需要放入的jar包
commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.4.jar commons-logging-1.0.4.jar ezmorph-1.0.3.jar json-lib-2.2.3-jdk15.jar
两张图片（no.png和ok.png）
原文地址：https://www.cnblogs.com/yingyigongzi/p/9163423.html
时间： 2024-08-04 20:41:23