首页 新闻 搜索 专区 学院

使用jQuery的异步方法获取数据

0
悬赏园豆:10 [已解决问题] 解决于 2017-07-28 17:51
急救答案补全
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<button>$.getJSON方法获取JSON文件数据</button>
<ul id="result"></ul>
<script>
$(document).ready(function(){
var $username = $('#username'),
$result = $('#result'),
url = 'userlist.json';
$('button').on('click', function() {
//获取json数据并以列表形式显示在result
})
})

</script>

</body>
</html>
小小娜的主页 小小娜 | 初学一级 | 园豆:173
提问于:2017-07-28 15:02
< >
分享
最佳答案
0
  $.post(url, { username: $username}, function (data) {
          $("#result").html(data);
    });

要是data是个集合的话,data点出来属性。要是data不是object对象,用eval函数,转一下。

收获园豆:6
神雕爱大侠 | 菜鸟二级 |园豆:201 | 2017-07-28 16:01

没有出来

$.post这个地方要用$.getJSON的方法

小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:06

@小小娜: 突然明白了你想干啥。http://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_getjson

看看这个例子。直接获取json数据,获取出来要遍历下,用 $.each,这个函数

 $.each(result, function(i, field){
        $("p").append(field + " ");
      });

神雕爱大侠 | 园豆:201 (菜鸟二级) | 2017-07-28 16:14

@神雕爱大侠: 

没有出来,是我那个地方也的有问题吗

$(document).ready(function(){
var $username = $('#username'),
$result = $('#result'),
url = 'userlist.json';
$('button').on('click', function() {
//获取json数据并以列表形式显示在result中
$.getJSON('userlist.json',function(data){
$.each(data,function(i,n){
userlist+="<li>"+n["optionValue"]+"</li>";
});
userlist+="</ul>";
$('#result').append(userlist);
});
return false;

})
})

小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:24

@小小娜: 

$.each(data,function(i,n){
userlist+="<li>"+n+"</li>";
});
userlist+="</ul>";
$('#result').append(userlist);
});

神雕爱大侠 | 园豆:201 (菜鸟二级) | 2017-07-28 16:31

@神雕爱大侠: 不好用,会是因为这的问题吗?

var $username = $('#username'),
$result = $('#result'),
url = 'userlist.json';

小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:45

@小小娜: 刚看了下,你这种数据格式没问题,而且我换成这种格式,下面代码也能执行。

我觉得你是不是在一个文件夹里,直接放了这两个文件?这样是不行的,这样会报错,ajax只支持HTTP,https,这种错误。你新建个网站项目,然后在把这两个文件加入到项目里,这样是可行的。

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("a.js",function(result){
      $.each(result, function(i, field){
          alert(field.firstName);
          alert(field.lastName);
       
      });
    });
  });
});
神雕爱大侠 | 园豆:201 (菜鸟二级) | 2017-07-28 17:11

@神雕爱大侠: 我只有一个文件

$.getJSON('userlist.json',function(data){这就开始错了

小小娜 | 园豆:173 (初学一级) | 2017-07-28 17:15

@小小娜: 报的啥错,你是在一个项目里做的?还是就一个html文件,一个json文件?

神雕爱大侠 | 园豆:201 (菜鸟二级) | 2017-07-28 17:20

@神雕爱大侠: 

做的alart没有弹出

小小娜 | 园豆:173 (初学一级) | 2017-07-28 17:22

@小小娜: 我qq 809794333,用这个吧,贴子麻烦

神雕爱大侠 | 园豆:201 (菜鸟二级) | 2017-07-28 17:23

@神雕爱大侠: 好的

小小娜 | 园豆:173 (初学一级) | 2017-07-28 17:24
其他回答(3)
0

发个POST请求,然后在成功的返回方法中加载你的数据。

$("#id").html(data)
BUTTERAPPLE | 园豆:2950 (老鸟四级) | 2017-07-28 15:08
0
$.ajax({ 

        type: "post", 

       url: "path", 

       cache:false, 

       async:false, 

        dataType: "JSON", 

         success: function(xmlobj){ 
        for(....){
          $('#result').append(....);
        }          } });
与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-28 15:26

要用$.getJSON方法

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:07
0

.getJson参考:http://www.w3school.com.cn/jquery/ajax_getjson.asp

收获园豆:4
金琥 | 园豆:2560 (老鸟四级) | 2017-07-28 16:06

谢谢

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:07

@小小娜: 问题解决了吗?

支持(0) 反对(0) 金琥 | 园豆:2560 (老鸟四级) | 2017-07-28 16:08

@金琥: 没有

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:09

@小小娜: 

列表参考:http://www.jb51.net/article/43780.htm

支持(0) 反对(0) 金琥 | 园豆:2560 (老鸟四级) | 2017-07-28 16:11

@金琥: 

没出来

$(document).ready(function(){
var $username = $('#username'),
$result = $('#result'),
url = 'userlist.json';
$('button').on('click', function() {
//获取json数据并以列表形式显示在result中
$.getJSON('userlist.json',function(data){
$.each(data,function(i,n){
userlist+="<li>"+n["optionValue"]+"</li>";
});
userlist+="</ul>";
$('#result').append(userlist);
});
return false;

})
})

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:25

@小小娜: 

$.getJSON('userlist.json',function(data){
var userStr="<ul>";
$.each(data,function(i,n){
userStr+="<li>"+n["optionValue"]+"</li>";
});
userStr+="</ul>";
$('#result').append(userStr);
});
return false;

写成这样,在试试

支持(0) 反对(0) 金琥 | 园豆:2560 (老鸟四级) | 2017-07-28 16:30

@金琥: 不好用,会因为这个吗

var $username = $('#username'),
$result = $('#result'),
url = 'userlist.json';

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 16:46

@小小娜: 你用alert("111");提示框调试,每一步都写入不同的提示框,什么时候没有提示框了,就说明错在哪里了。

支持(0) 反对(0) 金琥 | 园豆:2560 (老鸟四级) | 2017-07-28 16:52

@金琥: $.getJSON("userlist.json",function(data){这就错了

支持(0) 反对(0) 小小娜 | 园豆:173 (初学一级) | 2017-07-28 17:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册