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

最新推荐文章于 2015-11-07 14:59:00 发布
碧水天华
最新推荐文章于 2015-11-07 14:59:00 发布
阅读量412
点赞数
分类专栏： ajax json Struts整合
本文链接：https://blog.csdn.net/jie1336950707/article/details/49515699
版权
Struts整合同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
json
7 篇文章 0 订阅
订阅专栏
ajax
6 篇文章 0 订阅
订阅专栏
<%@ 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

收藏

觉得还不错? 一键收藏
0
评论
S2SH+ajax+json-------ajax解析json文件编写

"java" import="java.util.*" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + reques
复制链接

扫一扫
专栏目录