登陆验证和二级联动

Posted yingyigongzi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了登陆验证和二级联动相关的知识，希望对你有一定的参考价值。

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‘ />&nbsp;该用户名已经存在";//这里需要用到no.png图片
            }else{
                document.getElementById("tip").innerHTML="<img src=‘ok.png‘ />&nbsp;该用户名可以使用";//这里需要用到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()" />&nbsp;&nbsp;<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>
&nbsp;&nbsp;
市：
<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）

以上是关于登陆验证和二级联动的主要内容，如果未能解决你的问题，请参考以下文章

vba实现excel二级联动多选功能

省市二级联动

三级联动怎么回显 javaweb

JS中的二级联动的注意事项

ajax省市联动 回发或回调参数无效 启用了事件验证。

asp有两个下拉菜单，是二级联动菜单