Ajxa验证用户和二级联动的实例(五)
验证用户：
<%@ 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 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+")"); if(dataObj.exist){ document.getElementById("tip").innerHTML="<img src='no.png'/> 该用户名已经存在"; }else{ document.getElementById("tip").innerHTML="<img src='ok.png'/> 该用户名可用"; } } }; xmlHttp.open("get", "getAjaxInfo?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="text" 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>
二级联动：
<%@ 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+")"); 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", "getAjaxInfo?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>
servlet服务端：
package com.wp.servlet; 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 GetAjaxInfoServlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); String action=request.getParameter("action"); if("checkUserName".equals(action)){ this.checkUserName(request, response); }else if("ejld".equals(action)){ this.ejld(request, response); } } private void checkUserName(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out=response.getWriter(); String userName=request.getParameter("userName"); JSONObject resultJson=new JSONObject(); if("jack".equals(userName)){ resultJson.put("exist", true); }else{ resultJson.put("exist", false); } out.println(resultJson); out.flush(); out.close(); } private void ejld(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out=response.getWriter(); String shengId=request.getParameter("shengId"); JSONObject resultJson=new JSONObject(); JSONArray jsonArray=new JSONArray(); JSONObject temp=null; switch(Integer.parseInt(shengId)){ case 1:{//我们把省市放在数据库中，通过之前我们学的将数据库的结果集转换为json格式来进行输出 //省为parentId，市为childId，这样在数据库中，省市就相关联了。 //struts2的action中list()方法先把省遍历出来，放到html页面上，市为"请选择"，当选完省后，市立马通过ajax刷新出来 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); out.println(resultJson); out.flush(); out.close(); } }
Java小生店铺：
Pc端：http://shop125970977.taobao.com/index.htm
手机端：搜索 java小生店铺
希望店铺的资料能帮助到你！！！
