Ajxa验证用户和二级联动的实例(五)
2024-06-09 07:06:30
验证用户：
<%@ 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;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected 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小生店铺
希望店铺的资料能帮助到你！！！
转载于:https://www.cnblogs.com/lirenzhujiu/p/5916378.html
Ajxa验证用户和二级联动的实例(五)相关推荐
- 二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
- jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回 ...
- php mysql select联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]_jquery
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给 ...
- php+js实现二级联动下拉菜单(结合mysql数据库)_jQuery结合PHP+MySQL实现二级联动下拉列表[实例]...
实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回JSON数据给前端处理,即实现联动效果! 为便于讲解,这里直接给 ...
- 使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
根据所学知识和查找网上资料所写,有错误或不足之处欢迎指正. 实现的效果如下图(网络图片)所示: 开始写代码 注册html页面--先简单的利用table标签和input标签写出来(上面的图片用PS制作) ...
- vue一二级联动清空二级数据_【周一实用技巧】二级联动还不够，自动更新才最牛。Excel 2013利用数据验证条件制作一级、二级联动和自动更新下拉列表...
Excel 2013实用技巧教程系列 第-9.4-节 下拉列表 下拉列表作为提高数据录入效率和防止错误数据的有效方法,在日常工作中应用非常普遍.除了一级.二级联动列表,小编excel小课堂(ID:e ...
- 前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
二级联动菜单 select 对象 一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
- vue.js 默认选中select_vue select二级联动第二级默认选中第一个option值的实例
当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 所在区域 {{item.country}} {{item}} d ...
- JavaScript之实例练习（正反选、二级联动）
文章目录 正反选案例 二级联动案例 正反选案例 1.使用的原理 全选操作,就是遍历整个表格中的每一项,将checked设置为True 取消则是将checked全变为false就行 反选则是非原来的状态 ...
- popwindow下拉筛选 二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
最新文章
- vim粘帖的一个问题分析(pastetoggle)
- 皮一皮：现在真是键盘侠的年代阿....
- 解决python时间戳最大为3001年1月1日15时59分59秒的问题
- The fall of RNN / LSTM
- c++协程1 (boost::coroutine)
- xcode多工程联编 - 详细教程
- java io 并发编程,JAVA进阶系列 - 并发编程 - 第1篇：进程线程并发并行
- python的常用函数模块_（5）Python的常用模块函数
- Android增量更新——bsdiffbspatch
- 移动**21*设置无法接通_手机通话质量不好？你可能只差一步设置！
- L2-002 链表去重 (25 point(s))
- mysql和虚拟主机区别_香港空间购买,香港虚拟主机购买,香港免备案空间购买
- access insert语句怎么写_ySQL中特别实用的几种SQL语句送给大家
- 论财务自由与【生活-工作】平衡
- python中聚类和分类的区别_聚类与分类有什么区别？
- QListView text动态显示
- Python之itchat
- 快速破解IDEA（2017）
- C语言中条件状语从句,C 在条件状语从句中,如果其主语和主句的主语一致,那么可以把条件句中的主语和系动词be同时省略.此题中即是在If后省略了he is....
- 经典WEB项目之宠物商店（一）