jQuery,EXJ,Vue.js:都有Ajax函数
acync不写是true
cache不写是true
type不写是get
var params = {pageCurrent:4};等价于var params = "pageCurrent=1";
dataType默认是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不用考虑乱码问题
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)方法相当于打开一个连接，与服务端建立连接,底层是http请求，而http请求是面向连接的，要与服务端通信需要建立连接。打开连接的时候需要设置参数，如GET请求,url,true表示准备发送请求,还没发送
xhr.send(null);才是发送请求
回调函数：函数是自己写的，但不是由自己调用，由别人调用。如生活中网上买东西自己留下电话号码，自己不知道东西什么时候到，但是东西到了快递员会给自己打电话(快递员回调你打你的电话)。接口中的方法都可看成回调函数（由自己写但不由自己调用的函数）。
<%@ 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>系统日志列表页面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">数据加载中。。。</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(){
//定义参数
var params="pageCurrent=1";
//定义请求url
var url="doFindPageObjects.do";
//发起异步请求
$.ajax({
data:params,
url:url,
success:function(result){
console.log(result);
doHandleResponseResult(result);
},
error:function(){
alert("错误");
}
});
}
function doHandleResponseResult(result){
}
</script>
</body>
</html>
dataType默认是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>系统日志列表页面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">数据加载中。。。</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(){
//定义参数
var params="pageCurrent=1";
//定义请求url
var url="doFindPageObjects.do";
//发起异步请求
$.ajax({
data:params,
url:url,
dataType:"text",
success:function(result){
console.log(result);
doHandleResponseResult(result);
},
error:function(){
alert("错误");
}
});
}
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>系统日志列表页面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">数据加载中。。。</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() {
//定义参数
var params = "pageCurrent=1";
//定义请求url
var url = "doFindPageObjects.do";
//发起异步请求
$.ajax({//{(底层构建XmlHttpRequest对象)-JS用XmlHttpRequest对象与服务端通讯
data : params,
url : url,
dataType : "json",
success : function(result) {
console.log(result);
doHandleResponseResult(result);
},
error : function() {
alert("错误");
}
});
}
function doHandleResponseResult(result) {
if (result.state == 1) {//state是我们自己在Json中定义的
doSetTableBodyRows(result.data.records);
} else {
alert(result.message);
}
}
function doSetTableBodyRows(records) {
//1.获取tbody对象，清空对象内容
var tBody = $("#tbodyId");
tBody.empty();
//2.将记录追加到tbody中
//for(var i=0;i<records.length;i++){
//}
for ( var i in records) {
//创建tr对象
var tr=$("<tr></tr>");
//创建tds对象
var tds=doCreateTds(records[i]);
//将td追加到tr对象
tr.append(tds);
//将tr追加到tbody对象
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>
