验证用户:

<%@ 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. captive portal

    刷好lineageos后默认浏览器无法上网,实际上并不是没有连上网,而是captive portal即网关设置错误,设置一下即可上网. adb shell "settings put glo ...

  2. DRF 版本和认证

    Django Rest Framework 版本控制组件 DRF的版本 版本控制是做什么用的, 我们为什么要用 首先我们要知道我们的版本是干嘛用的呢~~大家都知道我们开发项目是有多个版本的~~ 当我们 ...

  3. 实验九 在JSP中使用数据库

    实验性质:验证性 实验学时: 1学时 实验地点: 一 .实验目的与要求 1. 掌握在JSP中使用数据库的方法. 2. 掌握JSP对数据库的基本操作:增.删.改.查. 二. 实验内容 1.JSP访问数据 ...

  4. [CEOI2007] 树的匹配Treasury

    类型:树形 DP 传送门:>Here< 题意:给一棵树,你可以匹配有边相连的两个点,问你这棵树的最大匹配是多少,并且计算出有多少种最大匹配. 解题思路 首先树形Dp是很明显的,$f[i][ ...

  5. apache 与 tomcat、PHP 关系

    Apache:web网络服务器,只支持静态网页,如HTML,C语言开发的 Tomcat:web网络服务器,是apache的扩展,且是个java代码解释器,可脱离apache独立使用,Servlet.J ...

  6. MT【245】小概率事件

    (2011年AAA测试)将一枚均匀的硬币连续抛掷$n$次,以$P_n$ 表示未出现连续3次正面的概率.求$\{P_n\}$.并讨论$\{P_n\}$单调性和极限. 分类讨论:第$n$次反面则未出现连续 ...

  7. Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2)

    第一次参加cf的比赛 有点小幸运也有点小遗憾 给自己定个小目标 1500[对啊我就是很菜qvq A. The Rank 难度:普及- n位学生 每个学生有四个分数 然鹅我们只需要知道他的分数和 按分数 ...

  8. EtherType :以太网类型字段及值

    Ethernet II即DIX 2.0:Xerox与DEC.Intel在1982年制定的以太网标准帧格式.Cisco名称为:ARPA Ethernet II类型以太网帧的最小长度为64字节(6+6+2 ...

  9. luogu1196 银河英雄传说 (并查集)

    并查集,不仅记fa,还记与fa的距离,还记根对应的尾节点 路径压缩的时候更新那个距离就行了 #include<bits/stdc++.h> #define pa pair<int,i ...

  10. @transactional注解在什么情况下会失效,为什么。

    @transactional注解在什么情况下会失效,为什么. @Transactional的使用: @Transactional public void updateUserAndAccount(St ...