您的位置：首页 > Web前端 > JavaScript

S2SH+ajax+json-------ajax解析json文件编写

2015-10-30 19:34 831 查看 
<%@ 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>My JSP 'TestJson.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

<script type="text/javascript" src="util/jquery.js">
</script>
<script type="text/javascript">

$(document).ready(function() {
aaa();

});

function aaa() {
var username = $("#username").val();

$.ajax( {
type : "get",//使用get方法访问后台
dataType : "json",//返回json格式的数据
url : "test/testByAction.action?t=" + Math.random(),//要访问的后台地址，防止读取本地缓存加一个参数
//  data : "username=" + username,//要发送的数据
success : function(msg) {//msg为返回的数据，
var data = msg.user;//取到返回数据msg种的user           document.getElementById("tt").innerHTML = msg.success;
console.info(data);//讲数据加载到控制台，利于调试
$.each(data, function(i, n) {//利用each函数便利数组，注意如果data不是数组可能取不到值，我就犯错了，一种取到object
var row = $("#template").clone();
row.find("#sysId").html("<tr><td>" + n.id + "</td>");
row.find("#sysName").html("<td>" + n.name + "</td>");
row.find("#sysPassword").html("<td>" + n.say + "</td>");
row.find("#sysAge").html("<td>" + n.password + "</td>");

row.appendTo("#datas");//添加到模板的容器中
});

},

complete : function() {
$("#loader").hide();
}//AJAX请求完成时隐藏loading提示

});
}
</script>
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();//声明 JavaScript 内建对象。

} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//xmlhttp.responseText表示服务器返回的书不是xml，如果是xml文件应当写成var ss = xmlhttp.responseXML ;
//如果来自服务器的响应并非 XML，请使用 responseText 属性。
//如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
var ss = xmlhttp.responseText;
var hh = eval("(" + ss + ")");
document.getElementById("myDiv").innerHTML = ss;
}
}
xmlhttp.open("POST",
"http://localhost:8088/JsonStrutsTest/test/testByAction.action",
true);
xmlhttp.send();
}
</script>

<script type="text/javascript">

$(document)
.ready(
function() {
$("#b01")
.click(
function() {
$('#load')
.load(
"http://localhost:8088/JsonStrutsTest/test/testByAction.action");

});
});
</script>

<script type="text/javascript">
$(function() {
$("#test3")
.click(
function() {
$
.ajax( {
async : false,//是否异步，false同步，true异步加载
dataType : "json",
url : "test/testByAction.action?t="
+ Math.random(),
type : "POST",
success : function(data) {
if (!(data.user.length > 0)) {
$("#show1").html(data);
$("#show2").append("取到的数据长度不大于0");
} else {
$("#show1").empty();
var s = "<thead id='showbooktitle'><tr><td>书名</td><td>作者</td><td>出版社</td></tr></thead>";
$("#show2").append(s);

$("#show2").append(data);
$.each(data.user,
function(i, book) {
var s = "<tr><td>"
+ book.id
+ "</td><td>"
+ book.name
+ "</td><td>"
+ book.say
+ "</td></tr>";
$("#show2").append(s);
});
}
}
});
});
});
</script>

<script type="text/javascript">
$(document).ready(function() {

$("#test4").click(function() {

var a;
$.ajax( {
dataType : "json",
type : 'POST',
async : false,
/*url : "testJSONFromActionByGeneral",*/
url : 'test/testByAction',
data : '',
success : function(re) {
console.info(re);
**$("#show3").html(re.user[0].id);//取到数组users数组中某个user的id**
/*  alert(a)*/
}
});

});

});
</script>

</head>

<body>
<p>
<div class=aaa>

<div id="tt">
aa
</div>
<hr>
<table id="datas" style="border: 1px solid lime;">

c446
<tr id="template">
<td id="sysId">
ID
</td>
<td id="sysName">
用户名
</td>
<td id="sysPassword">
密码
</td>
<td id="sysAge">
年龄
</td>

</tr>
</table>
<div id="loader">
数据正在拼命加载中
</div>
</div>
</p>

<h2>
AJAX
</h2>
<button type="button" onclick="loadXMLDoc()">
请求数据
</button>
<div id="myDiv"></div>

<p>
${user}
</p>

<p>
${dataMap.user.id}
</p>
<p>
${user.name}
</p>
<p>
${user.say}
</p>
<p>
${user.password }
</p>

<p>

<button id="b01">
测试$(selector).load(url,data,callback)
</button>
<br />
<div id="load"></div>

</p>
<p>
<button id="test3">
测试三
</button>
</p>
<p id="show1"></p>
<p id="show2"></p>
<p>
<button id="test4">
测试四
</button>
</p>
<p id="show3"></p>

<p></p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航