老裴帮助关于Jquery中Ajax的常用方式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
<title>JqueryAjax操作</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<script type="text/javascript"
src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
</head>
<script type="text/javascript">
jQuery(document).ready(function(){
//document.write("当前浏览器的版本号是:"+jQuery.browser.version);
// document.write("当前浏览器是IE么?:"+jQuery.browser.msie);
//jQuery("#btn3").load("<%=path%>/pages/common/Button.jsp",function(){
// alert("页面加载成功!");
// })
//-------------------------JqueryAjax操作---------------------------------
jQuery("#btn_sub1").click(function(){
var username = jQuery("#username").val();
var password = jQuery("#password").val();
if(username.length == 0 ){
jQuery("#div_un").text("用户名不能空").css({"background-color":"green"});
return;
}else if(password.length == 0 ){
jQuery("#div_pwd").text("密码不能空").css({"background-color":"green"});
return;
}else{
jQuery.ajax({
// 发送信息至服务器时内容编码类型
contentType:"application/x-www-form-urlencoded",
//预期服务器返回的数据类型
dataType:"text",
//请求方式 ("POST" 或 "GET")
type: "GET",
//发送请求的地址
url: "login",
//默认设置下，所有请求均为异步请求
async: false,
//发送到服务器的数据
data: "username="+username+"&password="+password,
//请求成功后的回调函数
success: function(msg){
alert(msg);
if("" == msg){
return;
}
var msgArr = msg.split(":");
jQuery("#"+msgArr[0]).text(msgArr[1]).css({"background-color":"red"});
},
//请求失败时调用时间
error:function(){
alert("服务器出错了!");
}
});
}
});
//-----------------------------JqueryGET操作--------------------------------
jQuery("#btn_sub2").click(function(){
var username = jQuery("#username2").val();
var password = jQuery("#password2").val();
if(username.length == 0 ){
jQuery("#div_un2").text("用户名不能空").css({"background-color":"green"});
return;
}else if(password.length == 0 ){
jQuery("#div_pwd2").text("密码不能空").css({"background-color":"green"});
return;
}else{
var param = "username="+username+"&password="+password;
jQuery.get(
"login",
param,
function(msg){
alert(msg);
if("" == msg){
return;
}
var msgArr = msg.split(":");
jQuery("#"+msgArr[0]+"2").text(msgArr[1]).css({"background-color":"red"});
});
}
});
//-----------------------------JqueryPOST操作--------------------------------
jQuery("#btn_sub3").click(function(){
var username = jQuery("#username3").val();
var password = jQuery("#password3").val();
if(username.length == 0 ){
jQuery("#div_un3").text("用户名不能空").css({"background-color":"green"});
return;
}else if(password.length == 0 ){
jQuery("#div_pwd3").text("密码不能空").css({"background-color":"green"});
return;
}else{
var param = "username="+username+"&password="+password;
jQuery.post(
"login",
param,
function(msg){
alert(msg);
if("" == msg){
return;
}
var msgArr = msg.split(":");
jQuery("#"+msgArr[0]+"3").text(msgArr[1]).css({"background-color":"red"});
},
"text"
);
}
});
});
</script>
<body>
<center>
<fieldset>
<legend>JqueryAjax操作</legend>
<form action="" id="fom1" name="fom1" method="">
<table width="400" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username" id="username" value="" />
</td>
<td>
<div id="div_un"></div>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" name="password" id="password" value="" />
</td>
<td>
<div id="div_pwd"></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="div_success"></div>
</td>
</tr>
<tr>
<td colspan="right">
<input type="button" id="btn_sub1" value="确定" />
</td>
<td colspan="">
<input type="reset" id="btn_ret1" value="重置" />
</td>
<td colspan="">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
<fieldset>
<legend>JqueryGET操作</legend>
<form action="" id="fom2" name="fom2" method="">
<table width="400" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username2" id="username2" value="" />
</td>
<td>
<div id="div_un2"></div>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" name="password2" id="password2" value="" />
</td>
<td>
<div id="div_pwd2"></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="div_success2"></div>
</td>
</tr>
<tr>
<td colspan="right">
<input type="button" id="btn_sub2" value="确定" />
</td>
<td colspan="">
<input type="reset" id="btn_ret2" value="重置" />
</td>
<td colspan="">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
<fieldset>
<legend>JqueryPOST操作</legend>
<form action="" id="fom3" name="fom3" method="">
<table width="400" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" name="username3" id="username3" value="" />
</td>
<td>
<div id="div_un3"></div>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" name="password3" id="password3" value="" />
</td>
<td>
<div id="div_pwd3"></div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="div_success3"></div>
</td>
</tr>
<tr id="btn3">
<td colspan="right">
<input type="button" id="btn_sub3" value="确定" />
</td>
<td colspan="">
<input type="reset" id="btn_ret3" value="重置" />
</td>
<td colspan="">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
</center>
</body>
</html>