在一个ajax请求上更新两个div

时间:2014-06-22 09:42:16

标签: jquery ajax

我想仅使用一个ajax请求更新两个div。但是,下面的代码会在不更新数据的情况下清除这两个分区。请看一下我的代码:

AJAX请求文件

<div class='subtotal_<?php echo $row['productid']; ?>'>
    <p>Subtotal: <?php echo $subtotal; ?></p>
</div>
<div id='totalamount'>
    <p>Totalamount: <?php echo round($total); ?></p>
</div>

var productid = $(this).attr('class');
$.ajax
    ({
        type: "POST",
        url: "ajax_changequantity.php",
        data: {type:type,quantity:quantity,productid:productid},
        success: function(option)
        {
            var html = $(option);
            $('#totalamount').empty();
            $('.subtotal_'+productid).replaceWith(("#subtotal",html));
            $('#totalamount').replaceWith(("#totalamount",html));
        }
    });

Ajax文件

<div id='subtotal'>
    <p>Subtotal: <?php echo $subtotal; ?></p>
</div>
<div id='totalamount'>
    <p>Total Amount: <?php echo $totalamount; ?></p>
</div>

成功的ajax请求后的两个div都变为空白。没有数据进来。任何人都可以帮忙找到错误吗?

1 个答案:

答案 0 :(得分:0)

我创建了一个示例代码段,用于生成GET请求并一次更新多个元素。您可以修改它以发出POST请求。 希望这会有所帮助。

$.when(
    $.ajax({
            type: "GET",
            url: "http://graph.facebook.com/?id=http://stackoverflow.com/",
            success: function(option){
                //do stuff
            }
        })).then(function( option ) {
        //update html
        $('.div1').html('URL: ' + option.id);
        $('.div2').html('Shares: ' + option.shares);
});

JS Fiddle