当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery ajax读书笔记

发表于: 2014-07-23   作者:chengxuyuancsdn   来源:转载   浏览:
摘要: 1、jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()
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;
	}
	

jquery ajax读书笔记

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写J
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写J
from:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html jQuery确实是一个挺好的轻量级
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写J
一直觉得学习Jquery挺难的,看看选择器,记住他的一些方法,可是光看不练的话始终的掌握不了,个人
Jquery1.7.1实例教程 ——作者:Angel 目录 1. 个性化不同的链接样式 2 1.1 问题的提出 2 1.2 问题
一贯原则(上图): Html: <tr> <td class="lfTdBt">分类:</td> <td class=
jQuery之Ajax方法 收藏 1 . jQuery帮助之Ajax请求(一)jQuery.ajax(options) 2 . jQuery帮助之Ajax
jQuery入门[5]-AJAX jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery
HTTP 请求加载远程数据。通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.aj
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号