1.HTML代码
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>hello world</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function pullNoticeList() {
var url_long = $("#url_long").val();
var source = $("#source").val();
var request = "http://172.16.32.137:8080/buslines/hytc/adminAction_select.action?page="
+ url_long + "&rows=" + source + "&jsoncallback=?";
//&callback=? 必须加上，虽然可以返回数据但success：function 不会调用。jquery api 文档上有说明。
$.ajax({
dataType: "jsonp",//跨域访问 dataType 必须是jsonp 类型。
url: request,
type: "GET",
// jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
// jsonpCallback:"jsoncallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success: function(data) {
var id="";
var name="";
var value="";
for(var i=0;i<data.rows.length;i++){
var $row=data.rows[i];
value+=$row.id+","+$row.name;
}
$("#shortUrl").html("服务器端的数据是：" +value+"<br/>");
},
error: function(XMLHttpRequest,textStatus,errorThrown) {
alert("status" + XMLHttpRequest.status);
alert("readyState" + XMLHttpRequest.readyState);
alert("textstatus" + textStatus);
alert(errorThrown);
}
});
return false;
}
</script>
</head>
<body>
<div>
<form>
page：<input type="string" name="url_long" id="url_long" />
<br/>
rows<input type="string" name="source" id="source" />
<br/>
<input type="button" name="submit" value="提交" onclick="pullNoticeList()" />
</form>
</div>
<div id="shortUrl">
</div>
</body>
</html>
2.访问结果
注：page 是指第几页，rows是指访问多少数据
3.中间运行的时候出现了一个问题：
原因是跨域访问，web端配置struts时要加上：
原文链接：https://www.f2er.com/ajax/162448.html
