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

问题描述 投票:0回答:1

使用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'] );
jquery html ajax append concat
1个回答
1
投票

UPDATED表示数据结构:

    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选项中。

© www.soinside.com 2019 - 2024. All rights reserved.