jQuery,EXJ,Vue.js:都有Ajax函數(shù)
acync不寫(xiě)是true
cache不寫(xiě)是true
type不寫(xiě)是get
var params = {pageCurrent:4};等價(jià)于var params = "pageCurrent=1";
dataType默認(rèn)是json
http://localhost/ssm-v1/log/doLogListUI.do
jquery.js源碼
jQuery.ajaxSettings.xhr = function() {
try {
return new window.XMLHttpRequest();
} catch ( e ) {}
};
send: function( headers, complete ) {
var i,
xhr = options.xhr();
xhr.open(
options.type,
options.url,
options.async,
options.username,
options.password
);
//....
},
//...
try {
// Do send the request (this may raise an exception)
xhr.send( options.hasContent && options.data || null );
} catch ( e ) {
// #14683: Only rethrow if this hasn't been notified as an error yet
if ( callback ) {
throw e;
}
}
使用jQuery的ajax不用考慮亂碼問(wèn)題
ajaxSettings: {
url: location.href,
type: "GET",
isLocal: rlocalProtocol.test( location.protocol ),
global: true,
processData: true,
async: true,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
},
xhr.open("GET",url,true)方法相當(dāng)于打開(kāi)一個(gè)連接涯保，與服務(wù)端建立連接,底層是http請(qǐng)求，而http請(qǐng)求是面向連接的周伦，要與服務(wù)端通信需要建立連接夕春。打開(kāi)連接的時(shí)候需要設(shè)置參數(shù)，如GET請(qǐng)求,url,true表示準(zhǔn)備發(fā)送請(qǐng)求,還沒(méi)發(fā)送
xhr.send(null);才是發(fā)送請(qǐng)求
回調(diào)函數(shù)：函數(shù)是自己寫(xiě)的专挪，但不是由自己調(diào)用及志，由別人調(diào)用。如生活中網(wǎng)上買(mǎi)東西自己留下電話號(hào)碼寨腔，自己不知道東西什么時(shí)候到速侈，但是東西到了快遞員會(huì)給自己打電話(快遞員回調(diào)你打你的電話)。接口中的方法都可看成回調(diào)函數(shù)（由自己寫(xiě)但不由自己調(diào)用的函數(shù)）迫卢。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<h1>系統(tǒng)日志列表頁(yè)面Ajax-JQuery</h1>
<h1>
time:<%=new java.util.Date()%></h1>
<table width="100%" border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>userName</th>
<th>Method</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="3">數(shù)據(jù)加載中倚搬。。乾蛤。</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
console.log("page load complete");
doGetObjects();
});
function doGetObjects(){
//定義參數(shù)
var params="pageCurrent=1";
//定義請(qǐng)求url
var url="doFindPageObjects.do";
//發(fā)起異步請(qǐng)求
$.ajax({
data:params,
url:url,
success:function(result){
console.log(result);
doHandleResponseResult(result);
},
error:function(){
alert("錯(cuò)誤");
}
});
}
function doHandleResponseResult(result){
}
</script>
</body>
</html>
dataType默認(rèn)是json
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<h1>系統(tǒng)日志列表頁(yè)面Ajax-JQuery</h1>
<h1>
time:<%=new java.util.Date()%></h1>
<table width="100%" border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>userName</th>
<th>Method</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="3">數(shù)據(jù)加載中每界。。幻捏。</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
console.log("page load complete");
doGetObjects();
});
function doGetObjects(){
//定義參數(shù)
var params="pageCurrent=1";
//定義請(qǐng)求url
var url="doFindPageObjects.do";
//發(fā)起異步請(qǐng)求
$.ajax({
data:params,
url:url,
dataType:"text",
success:function(result){
console.log(result);
doHandleResponseResult(result);
},
error:function(){
alert("錯(cuò)誤");
}
});
}
function doHandleResponseResult(result){
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
</head>
<body>
<h1>系統(tǒng)日志列表頁(yè)面Ajax-JQuery</h1>
<h1>
time:<%=new java.util.Date()%></h1>
<table width="100%" border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>userName</th>
<th>Method</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="3">數(shù)據(jù)加載中盆犁。。篡九。</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
console.log("page load complete");
doGetObjects();
});
function doGetObjects() {
//定義參數(shù)
var params = "pageCurrent=1";
//定義請(qǐng)求url
var url = "doFindPageObjects.do";
//發(fā)起異步請(qǐng)求
$.ajax({//{(底層構(gòu)建XmlHttpRequest對(duì)象)-JS用XmlHttpRequest對(duì)象與服務(wù)端通訊
data : params,
url : url,
dataType : "json",
success : function(result) {
console.log(result);
doHandleResponseResult(result);
},
error : function() {
alert("錯(cuò)誤");
}
});
}
function doHandleResponseResult(result) {
if (result.state == 1) {//state是我們自己在Json中定義的
doSetTableBodyRows(result.data.records);
} else {
alert(result.message);
}
}
function doSetTableBodyRows(records) {
//1.獲取tbody對(duì)象谐岁，清空對(duì)象內(nèi)容
var tBody = $("#tbodyId");
tBody.empty();
//2.將記錄追加到tbody中
//for(var i=0;i<records.length;i++){
//}
for ( var i in records) {
//創(chuàng)建tr對(duì)象
var tr=$("<tr></tr>");
//創(chuàng)建tds對(duì)象
var tds=doCreateTds(records[i]);
//將td追加到tr對(duì)象
tr.append(tds);
//將tr追加到tbody對(duì)象
tBody.append(tr);
}
}
function doCreateTds(row){
var tds="<td>"+row.id+"</td>"+"<td>"+row.username+"</td>"+"<td>"+row.method+"</td>";
return tds;
}
</script>
</body>
</html>
