如何通过 jQuery AJAX 请求输出响应 HTML 数据？答案

【问题标题】：How to output the response HTML data by a jQuery AJAX request?如何通过 jQuery AJAX 请求输出响应 HTML 数据？
【发布时间】：2013-03-16 00:41:28
【问题描述】：

我有一个带有购物车的在线商店。购物车是 <table>，在将文章添加到购物车后会刷新其内容。

我使用 jQuery 的 AJAX 方法接收 HTML <td><tr> 作为来自被调用 PHP 脚本的响应。 Firebug 的控制台显示来自调用的正确响应。

正如您在我的代码中看到的，我想将 HTML 添加到表格中。我无法让它工作。我不懂AJAX方法吗？我想将这些<td><tr> 添加到购物车表中。

JavaScript（使用 jQuery 1.9.1）

$.ajax({
    url: 'php/addToShoppingCart.php',
    type: 'POST',
    dataType: 'html',
    data: content,

    complete: function(data) {  
        $('#shop section table tbody').append(data);
    },
});

Firebug 控制台

【问题讨论】：

标签： php html jquery response output

【解决方案1】：

用 .done() 试过了吗？

$.ajax({
  url: 'php/addToShoppingCart.php',
  type: 'POST',
  dataType: 'html',
  data: content,
}).done(function ( data ) {
  $('#shop section table tbody').append(data);
});

【讨论】：

如果我们在 fetching 时遇到错误会发生什么，will done 仍将被调用，如果是，您将在数据中获得什么。
done 仍然会被调用，并且你会收到错误消息，如果你不确定你的脚本是否会返回错误，我建议使用 success 代替，但无需进一步了解addToShoppingCart.php 中的代码，我假设他知道他的数据是正确的。
是的，我想指出这一点，因为错误处理在 ajax 中也很重要
我仍然认为错误处理应该在服务器端完成，而不是客户端。必须让服务器完成所有处理，让客户端只显示数据。虽然成功地工作允许您使用状态码，但我猜这只是个人喜好。

【解决方案2】：

你也可以使用成功

  $.ajax({
       url: 'php/addToShoppingCart.php',
       type: 'POST',
       dataType: 'html',
       data: content, 
       success : function(data) 
      {$('#shop section table tbody').append(data);}
      });

【讨论】：

【解决方案3】：

complete 的语法是

$.ajax({
url: 'php/addToShoppingCart.php',
type: 'POST',
dataType: 'html',
data: content,

}).complete(function (data) {
    $('#shop section table tbody').append(data);

});

【讨论】：

【解决方案4】：

在您的购物车中创建表格和一个 tr，以便您可以在顶部显示标题

<table cellpadding="5" cellpadding="2" border="0" id="cartprod">
    <tr>
      <td width="60%"><b>Product Name</b></td>
      <td width="20%"><b>Quantity</b></td>
      <td width="20"><b>Price</b></td>
    </tr>
</table>

然后你可以像这样附加你的内容

function AddToCart(pid)
{
    $.post('php/addToShoppingCart.php',{pid:pid},function(data){    
       $('#cartprod tr:first').after(data); 
    },'html')
}

【讨论】：

'pid' 可以添加用户正在添加到购物车的当前项目，并将通过 post 方法发送到您的 php 文件。如果没有要发送的数据，则保持大括号为空。