jquery ajax读书笔记
1、jsp页面
2、action
<%@ 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;
}