Ajax JQuery - добавить возвращаемые переменные + кнопку ввода и интервал в Div - PullRequest
Новая
       19

Ajax JQuery - добавить возвращаемые переменные + кнопку ввода и интервал в Div

0 голосов
/ 11 января 2020

Использование переменных из запроса Ajax для создания кнопки ввода и тега span, которые показывают количество лайков на пост (это для доски объявлений), но конкатенация полей с использованием JQuery мне не подходит , Если раньше это работало с использованием только php / html, но он хотел сделать его чище, используя Ajax / JQuery.

Попытка достичь следующих логик c с использованием 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 основа c попытка, но на самом деле не уверен в синтаксисе / логи c (не заполнял 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>`);    
    }
 }

JSON данные массива, возвращенные из Ajax запроса: 

$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'] );

1 Ответ

1 голос
/ 11 января 2020

ОБНОВЛЕНО для структуры данных: 

    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 является альтернативой Dot (.) , который используется для объединения строк в pHp.

. Лучше избегать разрывов строк при добавлении контента.

Мне пришлось кодировать ваш массив в pHp, чтобы получить представление о том, что вы получаете, и все же я не уверен, но я предполагаю, что здесь вы могли бы получить несколько объектов.

И не забудьте добавить dataType: 'json', к вашим ajax параметрам.

...