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

来源：互联网发布：京东数据编辑：程序博客网时间：2024/06/05 02:09
<%@ 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;">                    <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>
0 0