验证用户：

<%@ 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'/>&nbsp;该用户名已经存在";

                }else{

                    document.getElementById("tip").innerHTML="<img src='ok.png'/>&nbsp;该用户名可用";

                }

            }

        };

        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()"/>&nbsp;&nbsp;<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>

&nbsp;&nbsp;

市

<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小生店铺

希望店铺的资料能帮助到你！！！

Ajxa验证用户和二级联动的实例(五)的更多相关文章

  1. ajax二级联动代码实例

    //二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...

  2. Ajax二级联动简单实例

    效果图: 图1 图2(浙江省内存在山东省的数据,原因是先前加入的数据未删除) 思路:通过下拉省份,将省份id传入后台,根据省份塞入相应省份的市的数据,将市的数据再次传回前端 前端HTML及JS代码: ...

  3. jQuery应用实例3：全选、二级联动

    全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...

  4. JS应用实例6：二级联动

    本案例很常用,应用场景:注册页面填写籍贯,省市二级联动 总体思想:创建一个二维数组存入省市,获取选中的省份并比较,创建标签遍历添加 代码: <!DOCTYPE html> <html ...

  5. Query实例的ajax应用之二级联动的后台是采用php来做的

    jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment  ...

  6. 用户管理的设计--3.jquery的ajax实现二级联动

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 fu ...

  7. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  9. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

随机推荐

  1. Multiple websites on single instance of IIS

    序幕 通常需要在单个IIS实例上托管多个网站,主要在开发环境中,而不是在生产服务器上.我相信它在生产服务器上不是一个首选解决方案,但这至少是一个可能的实现. Web服务器单实例上的多个网站的好处是: ...

  2. loj6270

    #6270. 数据结构板子题 sol:对于一个询问L,R,Limit,答案就是所有长度小于R-l+1的线段-长度小于Limit的线段-左端点在L左边的线段-右端点在R右边的线段,求这个东西 后面两个东 ...

  3. Centos使用虚拟环境创建python django工程

    本地环境 通常我们登录就是后就是本地环境 本地环境下查看pip安装了那些包 pip3 list 可以看到本地环境下我们安装的是django1.11.16版本,现在我有个项目要使用django 2.0以 ...

  4. 最简单的socket服务器与客户端

    服务器: //服务器 #include <stdio.h> #include <netinet/in.h> #include <unistd.h> #include ...

  5. 【XSY2772】数列 特征多项式 数学

    题目描述 给你一个数列: \[ f_n=\begin{cases} a^n&1\leq n\leq k\\ \sum_{i=1}^k(a-1)f_{n-i}&n>k \end{c ...

  6. django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet.

    报错现象 django 启动的时候报错 django.core.exceptions.AppRegistryNotReady: Apps aren't loaded yet. 报错解决 记不清是我有毛 ...

  7. 对比cp和scp命令 将数据从一台linux服务器复制到另一台linux服务器

    cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在的目录下.cp命令还支持同时复制多个文件,当一次复制多个文件时,目标文 ...

  8. 「POJ - 1003」Hangover

    BUPT 2017 summer training (16) #2C 题意 n个卡片可以支撑住的长度是1/2+1/3+1/4+..+1/(n+1)个卡片长度.现在给出需要达到总长度,求最小的n. 题解 ...

  9. Leetcode 75.颜色分类 By Python

    给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色和蓝色. ...

  10. 「ZJOI2016」旅行者 解题报告

    「ZJOI2016」旅行者 对网格图进行分治. 每次从中间选一列,然后枚举每个这一列的格子作为起点跑最短路,进入子矩形时把询问划分一下,有点类似整体二分 至于复杂度么,我不会阿 Code: #incl ...