ajax-Jquery 如何使用Ajax 即时加载

问题描述

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

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

<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> 

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

$(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); } } }); });

时间: 2024-11-08 20:19:48

ajax-Jquery 如何使用Ajax 即时加载的相关文章

jQuery向下滚动即时加载内容实现的瀑布流效果_php实例

下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器, 每个 li 表示一列 <ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件) <li><

用jQuery的AJax实现异步访问、异步加载_jquery

本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问<

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)_jquery

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

怎么用ajax和asp.net做显示加载效果

问题描述 怎么用ajax和asp.net做显示加载效果:当我们把数据库的文件提出来的时候,还没有加载完,就显示正在加载,加载完后就用Repeater数据控件绑定数据! 解决方案 解决方案二:我用settimeout()就能实现,而且它能捕获状态解决方案三:请问有ajax和.net一起实现的吗??解决方案四:UpdateProgress就可以了,很方便的,需要装asp.netajax的扩展包,http://www.asp.net/ajax/下载,绝对可以实现,而且很cool的解决方案五:就是用aj

jquery中如何在页面加载的时候根据action中的值的长度动态生成div

问题描述 jquery中如何在页面加载的时候根据action中的值的长度动态生成div 我action中的数据是保存在json中,然后要根据数据记录数生成多个div, //门店信息信息加载 $.ajax({ url:"findAllStoreInfoAction.action?workDate="+showCurrentTime(), dataType:"json", type:"POST", async:false, success: func

jQuery实现的瀑布流加载效果示例_jquery

本文实例讲述了jQuery实现的瀑布流加载效果.分享给大家供大家参考,具体如下: demo.js: $(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], rightBox:[] } for(var i=0;i<box.length;i++){ var now = i%3; //now的值为0,1,2 switch(now){ case 0:

jQuery常用的4种加载方式分析[原创]_jquery

本文实例分析了jQuery常用的4种加载方式.分享给大家供大家参考,具体如下: 1. 页面加载之前执行,与嵌入的js加载方式一样: (function($){})(jquery) 示例: (function($){ alert('Hello jb51'); })(jquery); 2. 页面加载后执行: $(document).ready(function(){}) 示例: $(document).ready(function(){ alert('Hello jb51'); }); 3. 页面加

运用JQuery的toggle实现网页加载完成自动弹窗

 toggle()事件 它主要切换元素的可见状态,下面为大家介绍下运用JQuery的toggle实现网页加载完成自动弹窗 toggle()事件 它主要切换元素的可见状态.    1.toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示.    HTML 代码:   代码如下: <p>Hello</p><p style="display: none">Hello Again</p> 

jquery及js实现动态加载js文件的方法_javascript技巧

本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执