我正在尝试将ajax加载到两个不同的div中

时间:2014-02-10 18:12:30

标签: javascript jquery html ajax

我正在尝试将ajax加载到两个不同的div中,但是我检查控制台并且网页仍然将数据放入一个div中,即使它在ajax代码中被调用到两个不同的div。

<script>$(document).ready(function(){

    $.ajax({
      url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
      type: "get",
      data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "iphone 5", productId:"31303113" },
      dataType: "jsonp",
      success: ipod
    });

    });
    function ipod(data) {
var count = 0;
    console.log(data);
$.each(data.CNETResponse.TechProducts.TechProduct, function(index,value) {

    console.log("Name: "+data.CNETResponse.TechProducts.TechProduct[count].Name.$);
    var datastring = '<tr>'+'<td class="searchItem">'+data.CNETResponse.TechProducts.TechProduct[count].Name.$+'</td> </tr>';
    $('#tabs-1').append(datastring);
    console.log("$('#tabs-1').append(datastring)");

    count ++;
    });
         }</script>
         <script>$(document).ready(function(){

    $.ajax({
      url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
      type: "get",
      data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "Samsung Note 3", productId:"31303113" },
      dataType: "jsonp",
      success: ipod
    });

    });
    function ipod(data) {
var count = 0;
console.log(data);
$.each(data.CNETResponse.TechProducts.TechProduct, function(index,value) {

    console.log("Name: "+data.CNETResponse.TechProducts.TechProduct[count].Name.$);
    var datastring = '<tr>'+'<td class="searchItem">'+data.CNETResponse.TechProducts.TechProduct[count].Name.$+'</td> </tr>';
    $('#tabs-2').append(datastring);
    console.log("$('#tabs-2').append(datastring)");
    count ++;
    });
     }</script>

HTML

<div id="tabs-1">
<p></p>
</div>
<div id="tabs-2">
<p></p>
</div>

2 个答案:

答案 0 :(得分:1)

你有两个叫做ipod的功能。您需要为它们指定一个唯一的名称,否则将覆盖另一个名称。调用第二个'ipod2',然后设置第二个ajax调用,使用ipod2作为成功回调。

答案 1 :(得分:0)

<script>

    $(document).ready(function(){

        $.ajax({
          url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
          type: "get",
          data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "iphone 5", productId:"31303113" },
          dataType: "jsonp",
          success: ipod
        });

    });

    function ipod(data) {

        $.each(data.CNETResponse.TechProducts.TechProduct, function(i,v) {

            var datastring = '<div class="searchItem">'+v[i].Name + '</div>';
            $('#tabs-'+ i).append(datastring);

        });
     };

 </script>