jquery ajax读书笔记 -

chengxuyuancsdn

浏览: 8023 次
性别:
来自: 北京

最近访客更多访客>>

java_doom

zhangdong92

wqreto

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery ajax读书笔记

博客分类：

JS
jquery

1、jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		.focus{
			border:1px solid #foo;
			background:#fcc;
		}
		.username{
			border:1px solid #foo;
			background:#fcd;
		}
		
	</style>
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  </head>
  <script type="text/javascript">
  	
  	                      
	   $(document).ready(function(){
	  	  $(":input").focus(function(){//选中所有input、textarea、select、button
	  		$(this).addClass("focus");
	  	  }).blur(function(){
	  		$(this).removeClass("focus");
	  	  })
	    });
	  	function registerFun(){
	  		$(document).ready(function(){
	  			//alert($("#username").val());
	  		})
	  		$(document).ready(function(){
	  			//alert($("#password").val());
	  		})
	  		//jquery----dom
	  		//var $username=$("#username");//jquery对象
	  		//var username=$username[0];//dom对象-1
	  		//var username=$username.get(0);//dom对象-2
	  		//alert(username.value);
	  		//dom-----jquery
	  		var username=document.getElementById("username");//dom对象
	  		var $username =$(username);//jquery对象
	  		//alert($username.get(0).value);
	  		//获得name为sex选中的值
	  		//var $sex=$("input[name=sex]:checked");
	  		//alert($sex.get(0).value);
	  		//循环checkbox
	  		$("input[name=hobby]:checked").each(function(){
	  			//alert(this.value);
	  		})
	  		//select
	  		//alert($(".city").val());
	  		
	  		$("#street option:selected").each(function(){
	  			alert(this.value);
	  		})
	  	}
	  	
	  	$(document).ready(function(){
	   
	        //document.getElementById('uname').style.display="none";
	        //$("#uname").css("display","none");
	    	//$("#uname").hide();
	    	//$("#pwd").hide();
	    	$("#uname").attr('style','display:none');
	    	$("#pwd").attr('style','display:none');
	    	$("#loading").attr('style','display:none');
	    	$("#loading").ajaxStart(function(){
				$(this).show();	 
				$("#btn").attr("disabled",true);
	  		}).ajaxStop(function(){
	  			$(this).hide();
	  			$("#btn").attr("disabled",false);
	  		})
	  		
	    });
	    
	    
	  	function register(){
	  		if($("#username").val()==''){
	  			$("#uname").show();
	  			return false;
	  		}
	  		if($("#password").val()==''){
	  			$("#pwd").show();
	  			return false;
	  		}
	  		//$("#btn").attr("disabled",true);
	  		$("#btn").click(function(){
	  		//1、载入html文档
	  			//$("#test").load("common/test.xhtml",function(responseText,textStatus,XMLHttpRequest){
	  			//	if(textStatus=="success"){
	  			//		$("#btn").attr("disabled",false);
	  			//	}
	  			//});
	  			//2、返回字符串、xml、json $.get
		       $.post("BBSIbatis/register.action",
		  		{
		  			username:$("#username").val(),
		  			password:$("#password").val()
		  		},function(data,textStatus){
		  			//$("#test").html(data);//将返回的数据添加到页面上
		  			//alert(data);//返回字符串
		  			//返回xml格式out.print("<student><age>18</age><name>wz</name></student>");
		  			//var returnValue=$(data).find("name").text();
		  			//$("#test").html(returnValue);
		  			
		  		    //json {"result":{"id":1,"value":2}}
		  			$(data).each(function(){
		  				alert(data.result.id+":"+data.result.value);
		  			})
		  			//返回json格式
		  			//var name=data.name;
		  			//var age=data.age;
		  			//$("#test").html("姓名："+name+"年龄："+age);
		  		},"json")//json格式添加
	  			
	  		});
	  	}


//$.ajax
function registerAjax(){
	  		if($("#username").val()==''){
	  			$("#uname").show();
	  			return false;
	  		}
	  		if($("#password").val()==''){
	  			$("#pwd").show();
	  			return false;
	  		}
	  		//$("#btn").attr("disabled",true);
	  		$("#btn").click(function(){
	  			$.ajax({
	  				type:"post",
	  				url:"BBSIbatis/registerCheck.action",
	  				//dataType:"text",//返回的类型json,xml
	  				//data:{username:1,password:2},
	  				data:"username="+$("#username").val()+"&password="+$("#password").val(),//key，value
	  				success:function(dataReturn){
	  				    //json
	  				    //var name=dataReturn.name;
		  			    //var age=dataReturn.age;
		  			   // $("#test").html("姓名："+name+"年龄："+age);
		  			   //alert(dataReturn)
		  			   //返回html
		  			   if(dataReturn=="success"){
		  			   	 redirectIndex();
		  			   }else{
		  			   		$("#uname").show();
		  			   		$("#uname").html(dataReturn);
		  			   }
	  				},error:function(dataReturn){
	  					
	  				}
	  			})
	  		})
	  	}
</script>
  <body>
  	<div id="loading">注册中。。。</div>
  
  <TABLE>
    	<form action="/register" id="frm" name="registerFrm">
    		<TR><TD>用户名：</TD><TD><input type="text" name="user.name" id="username"/></TD><TD><DIV ID="uname">用户名不能为空</DIV></TD></TR>
    		<TR><TD>密码: </TD><TD><input type="text" name="user.pwd" id="password"/></TD><TD><DIV ID="pwd">密码不能为空</DIV></TR>
    		<TR><TD>性别：</TD><TD><input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0" />女</TD></TR>
    		<tr><td>爱好：</td><td><input type="checkbox" name="hobby" value="篮球 " />篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="拍球"/>拍球</td></tr>
    		<tr><td>地区：</td><td>
    		<select id="dis" name="city" class="cityuu">
    				<option value="beijing">北京</option>
    				<option value="shanghai">上海</option>
    				<option value="nanjing">南京</option>
    				<option value="wuhan">武汉</option>
    		</select></td></tr>
    	    <tr><td>街道：</td><td>
	    		<select id="street" name="street" multiple>
	    				<option value="shunyi">顺义</option>
	    				<option value="chaoyang">朝阳</option>
	    				<option value="haidian">海淀</option>
	    		</select></td>
	    	</tr>
    		<tr>
	    		<td><input type="button" value="提交" onclick="register()" id="btn"/></td>
	    		<td><input type="reset" value="重置"/></td>
    		</tr>
    	</form>
   </TABLE>
   	<div id="test"></div>
  </body>
</html>

2、action

public String registerCheck(){
		//xml
		//getHttpServletResponse().setContentType("text/xml;charset=utf-8");
		//json
		//getHttpServletResponse().setContentType("text/json;charset=utf-8");
		String username=getHttpServletRequest().getParameter("username");
		String password=getHttpServletRequest().getParameter("password");
		//解决返回页面乱码问题html
		getHttpServletResponse().setHeader("Cache-Control", "no-cache");
		getHttpServletResponse().setContentType("text/html;charset=utf-8");
		PrintWriter out = null;
		try {
			out = getHttpServletResponse().getWriter();
			
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//xml
		//out.print("<student><age>18</age><name>王欣</name></student>");
		//json
		//out.print("{name:'王欣',age:'18'}");
		//out.print("{result:{id:1,value:2}}");
		//html
			if("wz".equals(username)){
					out.print("success");
		    }else{
						out.print("用户名"+username+"不存在");
		    }
		return null;
	}

分享到：

上传、下载压缩图片 | 读书笔记5

2014-07-23 14:47
浏览 815
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery ajax读书笔记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery ajax读书笔记

评论

发表评论

相关推荐

读书笔记-jquey+数据库+css

jquery取值和ajax提交复习记录

json数据解析及typeof

主页面子页面传值总结

最近访客更多访客>>