Jquery 如何使用Ajax 即时加载

我页面首先是用 标签 迭代输出了 一些数据 ，
然后我要根据每个 ID 再重新加载出 另外表的 数据，， 这是 一对多
我现在是用 ajax 再次提交的，如果我在页面用 onclick ，就是每次
点击就有数据出来，
不过我现在想要即时加载出所有数据
下图是 ajax

参考

http://www.5icool.org/a/201401/1153.html
http://www.js-css.cn/a/jscode/flow/2013/1024/980.html
http://www.php100.com/html/itnews/it/2012/0903/10986.html

关键是要把页面上的静态不变的部分和需要动态加载的部分分离开来，以下是我的异步动态加载数据的方法，不知道有没有解决楼主的问题

$(document).ready(function() { /*从服务器端取回数据*/ $.ajax({ url: URL_getData, // 服务器端从数据库取数据的php文件的url地址，如http://111.222.33.44/getData.php type: "POST", data: { // 传递给getData.php的参数 "city": "苏州", // 要获取的数据所在的城市 "date": 2015 - 3 - 11, // 要获取的数据的日期 }, dataType: "json", // 传递过去的数据结构 beforeSend: function () { // 调用（交互）getData.php前执行的函数 showLoader("加载中..."); // 我自己写的显示加载提示框的函数 }, complete: function () { // 调用（交互）getData.php完成后执行的函数 hideLoader(); // 我自己写的隐藏加载提示框的函数 }, error: function () { // 调用交互失败时返回后执行的函数，如网络异常或者服务器异常 showLoader("网络异常，请检查后重试"); ...... } success: function (data) { // 成功返回数据后执行的函数，在getData.php里通过echo返回json结构数据 // 在这里就可以对页面的任意元素进行动态赋值和渲染了 // 假设返回的数据是[{name:skypupil, age:28}, {name:xbear, age:25}] var jsonArray = eval(data) // 返回的是json字符串，需要转换成json数组对象 for (var i = 0, l = jsonArray.length; i < l; i++) { // 这里将在无序列表标签"ul_person"下循环输出取到的数据，并带有跳转链接 html = ""; html = '<br>' + '<li><a data-ajax="false" href=' + URL_getDetails + '?userName=' + data[i]["name"] + '>' + "name is " + data[i]["name"] + " age is " + data[i]["age"] '</a></li>'; $("#ul_person").append(html); } } }); });

关键是要把页面上的静态不变的部分和需要动态加载的部分分离开来，以下是我的异步动态加载数据的方法，不知道有没有解决楼主的问题

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

        /*从服务器端取回数据*/
        $.ajax({
            url: URL_getData, // 服务器端从数据库取数据的php文件的url地址，如http://111.222.33.44/getData.php
            type: "POST",
            data: { // 传递给getData.php的参数
                "city": "苏州", // 要获取的数据所在的城市
                "date": 2015 - 3 - 11, // 要获取的数据的日期
            }, dataType: "json", // 传递过去的数据结构
            beforeSend: function () { // 调用（交互）getData.php前执行的函数
                showLoader("加载中..."); // 我自己写的显示加载提示框的函数
            },
            complete: function () { // 调用（交互）getData.php完成后执行的函数
                hideLoader(); // 我自己写的隐藏加载提示框的函数
            },
            error: function () { // 调用交互失败时返回后执行的函数，如网络异常或者服务器异常
                showLoader("网络异常，请检查后重试");
                ......
            }
            success: function (data) { // 成功返回数据后执行的函数，在getData.php里通过echo返回json结构数据
                // 在这里就可以对页面的任意元素进行动态赋值和渲染了
                // 假设返回的数据是[{name:skypupil, age:28}, {name:xbear, age:25}]
                var jsonArray = eval(data) // 返回的是json字符串，需要转换成json数组对象
                for (var i = 0, l = jsonArray.length; i < l; i++) { // 这里将在无序列表标签"ul_person"下循环输出取到的数据，并带有跳转链接
                    html = "";
                    html =
                        '<br>' +
                        '<li><a data-ajax="false" href=' + URL_getDetails + '?userName=' + data[i]["name"] + '>' +
                        "name is " + data[i]["name"] + "  age is " + data[i]["age"]
                    '</a></li>';
                    $("#ul_person").append(html);
                }
            }
        });
    });
</script>