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'/>&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验证用户和二级联动的实例(五)的更多相关文章

ajax二级联动代码实例
//二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...
Ajax二级联动简单实例
效果图: 图1 图2(浙江省内存在山东省的数据,原因是先前加入的数据未删除) 思路:通过下拉省份,将省份id传入后台,根据省份塞入相应省份的市的数据,将市的数据再次传回前端前端HTML及JS代码: ...
jQuery应用实例3：全选、二级联动
全选: 这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8378221.html 如果使用jQuery则会方便很多: <!DOCTYPE html> ...
JS应用实例6：二级联动
本案例很常用,应用场景:注册页面填写籍贯,省市二级联动总体思想:创建一个二维数组存入省市,获取选中的省份并比较,创建标签遍历添加代码: <!DOCTYPE html> <html ...
Query实例的ajax应用之二级联动的后台是采用php来做的
jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment ...
用户管理的设计--3.jquery的ajax实现二级联动
页面效果实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 fu ...
js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题第一种方法是xml方法 1 ...

随机推荐

captive portal
刷好lineageos后默认浏览器无法上网,实际上并不是没有连上网,而是captive portal即网关设置错误,设置一下即可上网. adb shell "settings put glo ...
DRF 版本和认证
Django Rest Framework 版本控制组件 DRF的版本版本控制是做什么用的, 我们为什么要用首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们 ...
实验九在JSP中使用数据库
实验性质:验证性实验学时: 1学时实验地点: 一 .实验目的与要求 1. 掌握在JSP中使用数据库的方法. 2. 掌握JSP对数据库的基本操作:增.删.改.查. 二. 实验内容 1.JSP访问数据 ...
[CEOI2007] 树的匹配Treasury
类型:树形 DP 传送门:>Here< 题意:给一棵树,你可以匹配有边相连的两个点,问你这棵树的最大匹配是多少,并且计算出有多少种最大匹配. 解题思路首先树形Dp是很明显的,$f[i][ ...
apache 与 tomcat、PHP 关系
Apache:web网络服务器,只支持静态网页,如HTML,C语言开发的 Tomcat:web网络服务器,是apache的扩展,且是个java代码解释器,可脱离apache独立使用,Servlet.J ...
MT【245】小概率事件
(2011年AAA测试)将一枚均匀的硬币连续抛掷$n$次,以$P_n$ 表示未出现连续3次正面的概率.求$\{P_n\}$.并讨论$\{P_n\}$单调性和极限. 分类讨论:第$n$次反面则未出现连续 ...
Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)
第一次参加cf的比赛有点小幸运也有点小遗憾给自己定个小目标 1500[对啊我就是很菜qvq A. The Rank 难度:普及- n位学生每个学生有四个分数然鹅我们只需要知道他的分数和按分数 ...
EtherType ：以太网类型字段及值
Ethernet II即DIX 2.0:Xerox与DEC.Intel在1982年制定的以太网标准帧格式.Cisco名称为:ARPA Ethernet II类型以太网帧的最小长度为64字节(6+6+2 ...
luogu1196 银河英雄传说 (并查集)
并查集,不仅记fa,还记与fa的距离,还记根对应的尾节点路径压缩的时候更新那个距离就行了 #include<bits/stdc++.h> #define pa pair<int,i ...
@transactional注解在什么情况下会失效，为什么。
@transactional注解在什么情况下会失效,为什么. @Transactional的使用: @Transactional public void updateUserAndAccount(St ...

Ajxa验证用户和二级联动的实例(五)

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

随机推荐

热门专题