weixin_33726943 2016-02-04 22:16 采纳率: 0%
浏览 55

Ajax不断重写HTML

On my html page there is some jquery that puts out a get request to a php page and then loops through the returned object and appends the table in the html.

At the bottom of the jquery is an ajax script that sends a value from the above jquery to another php page . This page ends up getting a value from amazon and sends it back to the html.

The problem is that if the number of objects/ items in the table is more than one , the ajax will overwrite itself in the html.

HTML

<table class="normal">
        <thead>
            <tr>
                <th>Image</th>
                <th style="width: 45%;">Item</th>
                <th>Argos Price</th>
                <th>Amazon Price</th>
                <th>URL</th>
            </tr>
        </thead>
    </table>

JS/AJAX

<script>           

        $.get("Extract_DataT2.php", function (data) {
            var JSON = jQuery.parseJSON(data); // it will be an object
            // loop through each item in the JSON object
            $.each(JSON.deals.items, function (index, value) {
                tr = $('<tr/>');
                tr.append("<td>" + "<img class='dealimg' src='" + value.deal_image + "' >" + "</td>");
                tr.append("<td>" + "<h3>" + value.title + "</h3>" + "<p>" + value.description + "</p>" + "</td>");
                //tr.append("<td>" + value.description + "</td>");
                tr.append("<td> £" + value.price + "</td>");
                tr.append("<td id='amazon'>Loading</td>");

                // take deal image url and remove unwanted bits
                // This means we have the product id to take us to the Argos website
                var str = value.deal_image;
                var res = str.match(/.*\/(.*)_1.jpg/);

  //more jquery here , but removed for stack. same as above

                // Add to table
                $('table').append(tr);

$.ajax({
  type: "POST",
  url: 'Task2.php',
    data: {pid:res[1]},
  success: function(data) {
    //alert(data);
      $("#amazon").html(data); 
      console.log( data );
 }
});

            });

        });
    </script>
  • 写回答

1条回答 默认 最新

  • weixin_33730836 2016-02-04 22:27
    关注

    It's wrong to give the same id to many elements. You should assign different id's (maybe you should concatenate with the product's id). This is causing your problem all the last "td" elements have the same id and js just picks the first one and assign the value you go from your request

    Try this:

    $.get("Extract_DataT2.php", function (data) {
        var JSON = jQuery.parseJSON(data); // it will be an object
        // loop through each item in the JSON object
        $.each(JSON.deals.items, function (index, value) {
    
            var str = value.deal_image;
            var res = str.match(/.*\/(.*)_1.jpg/);
    
            tr = $('<tr/>');
            tr.append("<td>" + "<img class='dealimg' src='" + value.deal_image + "' >" + "</td>");
            tr.append("<td>" + "<h3>" + value.title + "</h3>" + "<p>" + value.description + "</p>" + "</td>");
            tr.append("<td> £" + value.price + "</td>");
            tr.append("<td id='amazon_" + res + "'>Loading</td>");
    
            // Add to table
            $('table').append(tr);
    
            $.ajax({
                type: "POST",
                url: 'Task2.php',
                data: { pid: res[1] },
                success: function (data) {
                    $("#amazon_" + res).html(data);
                    console.log(data);
                }
            });
    
        });
    });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题