Ajax两个案例

╰半橙微兮° 2022-05-18 08:08 220阅读 0赞

### 案例一：验证注册名是否重复 ###

1、创建注册页面register.html

<body>
       <label for="email">您的登录名：</label>
       <input type="text" id="username" name="username" maxlength=32/>
       <input type="button" value="验证" onclick="checkUsername();"/>
       <span id="checkusername"> </span>
    </body>

2、使用JavaScript代码创建页面加载完成要调用的checkUsername()函数

3、创建回调函数handleStateChange()函数，然后根据请求状态返回结果进行处理，如果返回结果中包含“true”字符串，则表示该用户名有效，否则表示已经被注册过

<script type="text/javascript">
    		var xmlHttp;
    		function createXmlHttpRequest(){
    			//在IE下创建XMLHttpRequest对象
    			try{
    				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    			}catch(e){
    				try{
    					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch(oc){
    					xmlHttp=null;
    				}
    			}
    			//在非IE浏览器下创建XMLHTTPRequest对象
    			if(!xmlHttp && typeof XMLHttpRequest!="undefined"){
    				xmlHttp=new XMLHttpRequest();
    			}
    			return xmlHttp;
    		}
    		function checkUsername(){
    			var username=document.getElementById("username").value;
    			var url="check.jsp?username="+username;
    			createXmlHttpRequest();
    			xmlHttp.onreadystatechange=handleStateChange;
    			xmlHttp.open("GET",url,true);
    			xmlHttp.send(null);
    		}
    		function handleStateChange(){
    			if(xmlHttp.readyState==4){
    				if(xmlHttp.status==200){
    					var result=xmlHttp.responseText;
    					if(result.indexOf("true")!=-1){
    						document.getElementById("checkusername").innerHTML="恭喜你！用户名有效！";
    					}else{
    						document.getElementById("checkusername").innerHTML="对不起！用户名已被注册！";
    					}
    				}else{
    					alert("您请求的页面不存在！");
    				}
    			}
    		}
    	
    </script>

4、创建check.jsp页面对注册名进行验证并输出 true或者false

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <body>
       <%
       	String[] users={"Tom","Jarray","Mary","Jack"};
       	String username=request.getParameter("username");
       	String flag="true";
       	Arrays.sort(users);
       	int result=Arrays.binarySearch(users,username);
       	if(result>-1){
       		flag="false";
       	}
       	out.println(flag);
       %>
    </body>

### 案例二：实现类别级联 ###

1、创建index.html页面，然后在页面中定义两个下拉列表

<body>
    	一级分类：
    	<select id="bigclass" onchange="return submit();">
    		<option value="0">-选择类别-</option>
    		<option value="www">-网络维护-</option>
    		<option value="os">-操作系统-</option>
    		<option value="db">-数据库-</option>
    		<option value="pg">-程序设计-</option>
    	</select>    
    	二级分类：
    	<select id="subclass"></select>
     </body>

2、使用JavaScript代码创建加载完成要调用的submit()函数

3、编写回调函数callback()实现获得从服务器端返回的信息，然后根据这些信息动态生成OPTION元素

<script type="text/javascript">
    		var xmlHttp;
    		function createXmlHttpRequest(){
    			//在IE下创建XMLHttpRequest对象
    			try{
    				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    			}catch(e){
    				try{
    					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    				}catch(oc){
    					xmlHttp=null;
    				}
    			}
    			//在非IE浏览器下创建XMLHTTPRequest对象
    			if(!xmlHttp && typeof XMLHttpRequest!="undefined"){
    				xmlHttp=new XMLHttpRequest();
    			}
    			return xmlHttp;
    		}
    	
    		function submit(){
    			var selected=document.getElementById("bigclass");
    			if(selected.options[selected.selectedIndex].value==0){
    				alert("请选择类别！");
    				return false;
    			}else{
    				createXmlHttpRequest();
    				xmlHttp.onreadystatechange=callback;
    				xmlHttp.open("POST","select.jsp");
    				xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    				var selectvalue=selected.options[selected.selectedIndex].value;
    				xmlHttp.send("bigclass="+selectvalue);
    			}
    		}
    		
    		function callback(){
    			if(xmlHttp.readyState==4){
    				if(xmlHttp.status==200){
    					var target=document.getElementById("subclass");
    					var subclass_string=xmlHttp.responseText;
    					//alert(subclass_string);
    					var subclass_array=subclass_string.split(",");
    					while(target.options.length>0){
    						target.options.remove(0);
    					}
    					for(var j=0;j<subclass_array.length;j++){
    						var oOption=document.createElement("OPTION");
    						oOption.text=subclass_array[j];
    						oOption.value=subclass_array[j];
    						target.add(oOption);
    					}
    				}
    			}	
    		}
    	
    </script>

4、创建select.jsp页面来处理客户端发送的请求

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <%
      String bigclass=request.getParameter("bigclass");
      String subclass="";
      if("www".equals(bigclass)) subclass="网络管理,硬件设备,网络协议";
      if("os".equals(bigclass)) subclass="Windows,Linux,UNIX,其他";
      if("db".equals(bigclass)) subclass="SQL Server,Oracle,MySql,其他";
      if("pg".equals(bigclass)) subclass=".NET,Java,C++,C,软件工程,其他";
      out.print(subclass);
      		
     %>

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax请求同时序列化两个表单，再另带个参数

$.ajax({ type:'', url:'', data: $("form_info_one").serialize

秒速五厘米/ 2023年07月14日 08:05/ 0 赞/ 5 阅读

相关 chrome ajax sessionid,两个Chrome浏览器用户从Ajax调用不同的结果

我有一个旨在鼓励管理员用户选择他们存在的现有名称条目，但随后可对其进行修改的接口。两个Chrome浏览器用户从Ajax调用不同的结果渲染代码开始了，像这样 ![dQxT3

缺乏、安全感/ 2022年09月03日 13:24/ 0 赞/ 77 阅读

相关 Jquery Ajax案例

$(function () { $.ajax({ type: "POST",//提交方法

以你之姓@/ 2022年08月02日 01:58/ 0 赞/ 219 阅读

相关两个并行AJAX引发的业务思考？

事件的起因是：避免后台执行过慢影响页面显示效果在页面执行ajax进入后台执行大量的算法处理和调用数据量十分大的接口时，想比会导致回调过慢或者前端页面卡死的情况，这

电玩女神/ 2022年07月16日 12:49/ 0 赞/ 215 阅读

相关 Ajax两个案例

案例一：验证注册名是否重复 1、创建注册页面register.html <body> <label for="email">您的登录名：</lab

╰半橙微兮°/ 2022年05月18日 08:08/ 0 赞/ 221 阅读

相关实现两个autocompleter标签内容的关联(Struts2-AJAX)

通过指定autocompleter标签的formld属性，可以使两个<s:autocompleter>标签关联起来进行联动。如在某些网站的注册系统中，可以选择注册用户所在的省和

素颜马尾好姑娘i/ 2022年05月17日 12:48/ 0 赞/ 19 阅读

相关两种Ajax写法

Ajax:(Asynchronous Javascript And XML)简称为异步的js和xml js中有两种写法： //原生js写法 functio

﹏ヽ暗。殇╰゛Y/ 2022年03月28日 15:11/ 0 赞/ 351 阅读

相关 ajax的两种写法

一、原生ajax的实现 1.什么是ajax？ ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。通过在后台与服务器

古城微笑少年丶/ 2022年03月27日 05:37/ 0 赞/ 402 阅读

相关 ajax写入案例

var sql = "insert into xxx values('x','xx','xxx')",

悠悠/ 2021年10月23日 08:45/ 0 赞/ 352 阅读

相关 ajax查询案例

data=\{ html:"select\_x", querySql:"select \

旧城等待，/ 2021年10月23日 08:45/ 0 赞/ 410 阅读