在jquery中，提供了集中方法来进行ajax操作
一、$.get(url,[data],[callback])
向服务器发起get操作。
说明：url为请求地址，data为请求数据的列表（json对象），callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。
<script type="text/javascript">
var itemControl = {
param:{
descUrl:"/item/desc/",
paramUrl:"/item/param/"
},
//请求商品描述
getItemDesc:function(itemId) {
$.get(itemControl.param.descUrl+itemId+".html", function(data){
//返回商品描述的html，直接显示到页面
$("#item-desc").append(data);
});
},
//参数请求flag
haveParam:false,
//请求规格参数
getItemParam:function(itemId) {
//如果没有查询过规格参数，就做请求
if (!itemControl.haveParam) {
$.get(itemControl.param.paramUrl+itemId+".html", function(data){
//返回商品规格的html，直接显示到页面
$("#product-detail-2").append(data);
//更改flag状态
itemControl.haveParam = true;
});
}
}
};
$(function(){
//取商品id
var itemId = "${item.id}";
//给商品规格参数tab页绑定事件
$("#p-con-attr").bind("click", function(){
itemControl.getItemParam(itemId);
});
//延迟一秒加载商品描述信息
setTimeout(function(){
itemControl.getItemDesc(itemId);
},1000);
});
</script>
二、$.getJSON(url,[data],[callback])
向服务器发起get操作。
说明，对于get或getJSON方法，对服务器的返回数据格式要求有区别。
如果是getJSON方法，则要求服务器返回的是合法的json格式的字符串，这样在回到函数callback的第一个参数,实际就是已经转换为js中的对象数据，不再是原始的字符串。 如果服务器返回的是非合法的json格式字符串，则浏览器则无法成功获取到数据。
如果是get方法，则服务器返回的是任意格式的字符串，因为在回到函数callback的第一个参数,得到的就是原始的字符串内容，如果要想额外处理（比如转成js对象），需要自己处理。parse,Stringfy
注意：不论是哪种ajax请求，服务器底层返回的都是字符串内容。只是字符串格式的区别罢了，如 htnl格式，xml格式，json格式。
URL_Serv: "http://127.0.0.1:8081/rest/item/cat/list?callback=category.getDataService",
//URL_Serv: "http://localhost:8082/category.json",
FN_GetData: function() {
//使用jsonp来实现跨域请求
$.getJSONP(this.URL_Serv, category.getDataService);
//直接使用ajax请求json数据
/*$.getJSON(this.URL_Serv, function(json){
category.getDataService(json);
});*/
getDataService: function(a) {
var b = [], c = this;
$.each(a.data, function(a) {
this.index = a, "l" == this.t && (this.i = c.FN_RefactorJSON(this.i, 7)), b.push(c.renderItem(this, a))
});
//参考商城lib-v1.js中1205行
三、$.post(url,[data],[callback],[type])
向服务器发起post请求
说明：这个函数跟$.get()参数差不多，多了一个type参数，type为请求 的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么要求服务器返回的格式必须是合法的json格式的，这时在callback中获取到的就是转换过的json对象。
如果没有设置，就 和$.get()一样，服务器可返回任意格式的字符串，在callback中获取到的就是原始的字符串。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>登录</title>
<link type="text/css" rel="stylesheet" href="/css/login.css"/>
<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
</head>
<body>
<div class="w">
<div id="logo">
<a href="http://localhost:8082" clstag="passport|keycount|login|01">
<img src="/images/taotao-logo.gif" alt="" width="170" height="60"/>
</a><b></b>
</div>
</div>
<form id="formlogin" method="post" onsubmit="return false;">
<div class=" w1" id="entry">
<div class="mc " id="bgDiv">
<div id="entry-bg" clstag="passport|keycount|login|02" style="width: 511px; height: 455px; position: absolute; left: -44px; top: -44px; background: url(/images/544a11d3Na5a3d566.png) 0px 0px no-repeat;">
</div>
<div class="form ">
<div class="item fore1">
<span>用户名</span>
<div class="item-ifo">
<input type="text" id="loginname" name="username" class="text" tabindex="1" autocomplete="off"/>
<div class="i-name ico"></div>
<label id="loginname_succeed" class="blank invisible"></label>
<label id="loginname_error" class="hide"><b></b></label>
</div>
</div>
<script type="text/javascript">
setTimeout(function () {
if (!$("#loginname").val()) {
$("#loginname").get(0).focus();
}
}, 0);
</script>
<div id="capslock"><i></i><s></s>键盘大写锁定已打开，请注意大小写</div>
<div class="item fore2">
<span>密码</span>
<div class="item-ifo">
<input type="password" id="nloginpwd" name="password" class="text" tabindex="2" autocomplete="off"/>
<div class="i-pass ico"></div>
<label id="loginpwd_succeed" class="blank invisible"></label>
<label id="loginpwd_error" class="hide"></label>
</div>
</div>
<div class="item login-btn2013">
<input type="button" class="btn-img btn-entry" id="loginsubmit" value="登录" tabindex="8" clstag="passport|keycount|login|06"/>
</div>
</div>
</div>
<div class="free-regist">
<span><a href="/user/showRegister" clstag="passport|keycount|login|08">免费注册>></a></span>
</div>
</div>
</form>
<script type="text/javascript">
var redirectUrl = "${redirect}";
var LOGIN = {
checkInput:function() {
if ($("#loginname").val() == "") {
alert("用户名不能为空");
$("#loginname").focus();
return false;
}
if ($("#nloginpwd").val() == "") {
alert("密码不能为空");
$("#nloginpwd").focus();
return false;
}
return true;
},
doLogin:function() {
$.post("/user/login", $("#formlogin").serialize(),function(data){
if (data.status == 200) {
alert("登录成功！");
if (redirectUrl == "") {
location.href = "http://localhost:8082";
} else {
location.href = redirectUrl;
}
} else {
alert("登录失败，原因是：" + data.msg);
$("#loginname").select();
}
});
},
login:function() {
if (this.checkInput()) {
this.doLogin();
}
}
};
$(function(){
$("#loginsubmit").click(function(){
LOGIN.login();
});
});
</script>
</body>
</html>
四、$.ajax(opiton)
说明：$.ajax()这个函数功能强大，可以对ajax进行许多精确的控制。格式如：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="picPath" value="http://127.0.0.1:8003/ssmImage19"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
function submitImgSize1Upload(){
var option={
type:'POST',
url:'${pageContext.request.contextPath }/upload/uploadPic.do',
dataType:'text',
data:{
fileName : 'imgSize1File'
},
success:function(data){
//把json格式的字符串转换成json对象
var jsonObj = $.parseJSON(data);
//返回服务器图片路径，把图片路径设置给img标签
$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);
//数据库保存相对路径
$("#imgSize1").val(jsonObj.relativePath);
}
};
$("#itemForm").ajaxSubmit(option);//这是jquery.form.js中异步提交表单的方法,注意与ajaxForm的区别,原生ajax是$("itemForm").ajax
}
</script>
</head>
<body>
<form id="itemForm" action="${pageContext.request.contextPath }/items/saveOrUpdate.do" method="post">
<input type="hidden" name="id" value="${item.id }"/>
修改商品信息：
<table width="100%" border=1>
<tr>
<td>商品图片</td>
<td>
<p><label></label>
<img id='imgSize1ImgSrc' src='${picPath }${item.pic }' height="100" width="100" />
<input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
<input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$" tip="亲！您忘记上传图片了。" />
</p>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><% pageContext.setAttribute("basePath", request.getContextPath()+"/") ;%><html><head> <%@include file="/common/header.jsp"%> <title>我要投诉</title> <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/lang/zh-cn/zh-cn.js"></script> <script> window.UEDITOR_HOME_URL = "${basePath }js/ueditor/"; var ue = UE.getEditor('editor'); //获取部门下对应的人员列表 function doSelectDept(){ //1、获取部门 var dept = $("#toCompDept option:selected").val(); if(dept != ""){ //2、根据部门查询该部门下的所有人员列表 $.ajax({ url:"${basePath}sys/homeJson_getUserJson2.action", type:"post", data:{"dept":dept}, dataType:"json", success: function(data){ //3、解析返回的人员列表将人员列表设置到 被投诉人下拉框中 if(data != null && data != undefined){ if("success" == data.msg){ var $toCompName = $("#toCompName"); $toCompName.empty(); $.each(data.userList, function(i,user){ $toCompName.append("<option value='" +user.name+ "'>" + user.name +"</option>"); }); } else {alert("获取部门人员列表失败！");} } else { alert("获取部门人员列表失败！"); } }, error: function(){alert("获取部门人员列表失败！");} }); } else { //清空被投诉人下拉框 $("#toCompName").empty(); } } //提交表单 function doSubmit(){ //alert($("#form").serialize()); //1、保存投诉（异步） $.ajax({ url:"${basePath}sys/home_complainAdd.action", type:"post", data: $("#form").serialize(), success:function(msg){ if("success" == msg){ //2、提示用户投诉成功 alert("投诉成功！"); //3、刷新父窗口 window.opener.parent.location.reload(true); //4、关闭当前我要投诉窗口 window.close(); } else { alert("投诉失败！"); } }, error: function(){ alert("投诉失败！"); } }); } </script></head><body><form id="form" name="form" action="" method="post" enctype="multipart/form-data"> <div class="vp_d_1"> <div style="width:1%;float:left;"> </div> <div class="vp_d_1_1"> <div class="content_info"> <div class="c_crumbs"><div><b></b><strong>工作主页</strong> - 我要投诉</div></div> <div class="tableH2">我要投诉</div> <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0" > <tr> <td class="tdBg" width="250px">投诉标题：</td> <td><s:textfield name="comp.compTitle"/></td> </tr> <tr> <td class="tdBg">被投诉人部门：</td> <td><s:select name="comp.toCompDept" id="toCompDept" list="#{'':'请选择','部门A':'部门A','部门B':'部门B' }" onchange="doSelectDept()"/></td> </tr> <tr> <td class="tdBg">被投诉人姓名：</td> <td> <select name="comp.toCompName" id="toCompName"></select> </td> </tr> <tr> <td class="tdBg">投诉内容：</td> <td><s:textarea id="editor" name="comp.compContent" cssStyle="width:90%;height:160px;" /></td> </tr> <tr> <td class="tdBg">是否匿名投诉：</td> <td><s:radio name="comp.isNm" list="#{'false':'非匿名投诉','true':'匿名投诉' }" value="true"/></td> </tr> </table><s:hidden name="comp.compCompany" value="%{#session.SYS_USER.dept}"/><s:hidden name="comp.compName" value="%{#session.SYS_USER.name}"/><s:hidden name="comp.compMobile" value="%{#session.SYS_USER.mobile}"/> <div class="tc mt20"> <input type="button" class="btnB2" value="保存" onclick="doSubmit()" /> <input type="button" onclick="javascript:window.close()" class="btnB2" value="关闭" /> </div> </div></div> <div style="width:1%;float:left;"> </div> </div></form></body></html>
五、$.getScript( url, [callback] )
getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨 域载入JS文件。这个函数的意义是巨大 的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。参数url是待载入 JS 文件地址，callback是(可选) 成功载入后回调函数。
六、jquery对象.load( url, [data], [callback] )
load函数可以载入静态页面内容到指定jQuery对象。其中url请求的HTML页的URL地址，data是(可选)请求参数，callback是(可选)完成后的回调函数。