Ajax JQuery - 将返回的变量 + 输入按钮和 Span 附加到 Div

Question

使用来自 Ajax 请求的变量创建输入按钮和 span 标签，显示每个帖子的点赞数（这是用于留言板），但使用 JQuery 的字段连接超出了我的范围。之前只使用 php/html 进行过这项工作，但想使用 Ajax/JQuery 使其更简洁。

尝试使用JQuery实现以下逻辑：

<div class="content">
  <div class="post-action">

<input type="button" value="Like" id="like_<?php echo $ID . "_" . $UserID; ?>" class="like" style="<?php if($type == 1){ echo "color: #ffa449;"; } ?>" />&nbsp;(<span id="likes_<?php echo $ID . "_" . $UserID; ?>"><?php echo $total_likes; ?></span>)&nbsp;
  </div>
</div>

JQuery 基本尝试，但不确定语法/逻辑（没有在页面上填充 html，但 Ajax 请求正在工作）：

success: function(response) {

$(".content").html("")
for( var key of Object.keys( response ) ) {
$( '.content' ).append( `<div class="post-action">
    <input type="button" value="Like" id="like_${response[key].ID}_${response[key].UserID}></div>`);    
    }
 }

Ajax 请求返回的 JSON 数组数据：

$data[] = array ( 'ID' => $row['ID'], 'UserID' => $row['UserID'], 'UserIDLikeChk' => $row['UserIDLikeChk'], 'MessageText' => nl2br(htmlentities($row['MessageText'],ENT_COMPAT|ENT_IGNORE, "UTF-8") ), 'cntLikes' => $row['cntLikes'], 'Type' => $row['Type'] );

Answer 1

更新数据结构：

    success: function(response) {
    $(".content").html("");
      $.each(response, function() {
          $.each($(this), function(i, item) {
var mycss =(item.Type == 1) ? ' style="color: #ffa449;"' :'';
              $( '.content' ).append( '<div class="post-action"><input '+mycss+' type="button" value="Like" id="like_'+item.ID+'_'+item.UserID+'"><span id="likes_'+item.ID+'_'+item.UserID+'">'+item.cntLikes+'</span></div>');
          });
      });
    }

字符串和变量在您的代码中混合在一起，没有分离。 Javascript 中的 + 字符是 pHp 中用于字符串连接的点 (.) 的替代品。

而且在追加内容时最好避免换行。

我必须在 pHp 中对您的数组进行编码，以了解您得到了什么，但我仍然不确定，但我假设您可以在这里接收多个对象。

不要忘记将dataType: 'json', 添加到您的 ajax 选项中。