jquery update html с возвращенными данными mysql после POST

Question

У меня есть система голосования jquery/php, над которой я работаю. Как только пользователь нажимает кнопку голосования, открываются мода jQuery, и они должны подтвердить свой голос, нажав «Подтвердить». Это отправит запрос ajax для обновления базы данных, а что нет. После нажатия кнопки подтверждения модальная функция будет закрыта. Я хотел бы иметь возможность динамически обновлять количество голосов на странице. Я могу легко захватить эти данные из таблицы mySQL. Мой вопрос в том, как это получить от меня обратно для меня, чтобы обновить html-страницу динамически?

В настоящее время страница ничего не делает, поэтому пользователю не похоже, что они проголосовали. В идеале я бы хотел обновить общее количество голосов, а также добавить изображение, которое показывает, за что они голосовали.

function vote(el, id) { 
    $.ajax({ 
     type: 'POST', 
     url: '/path/morepath/', 

     dataType: 'json', 
     data: { 
      'action': 'castVote', 
      'vote': id 
     }, 
     success: function (data) {} 
    }); 
    $.modal.close(); 
} 

Answer 1

На стороне сервера ответьте на запрос POST объектом JSON, содержащим количество голосов и, возможно, путь к изображению.

Затем в обратном вызове AJAX данные будут этим объектом. Затем вы можете использовать jQuery для выбора элемента в DOM и вызвать .text() или .html() на нем для обновления содержимого.

Answer 2

Вы можете изменить содержание или значение HTML количества голосов, используя несколько различных вариантов, такие как:

... 
     success: function(data) 
     { 
      var $newTotal = ...//get total from data 
      $('voteCountContainer').html($newTotal); // or you can also use .val() if it's an input 
     }  
... 

Надеется, что помогли,

Dan

Answer 3

Если вы передаете плохо сформированные данные из PHP, вы можете сделать это немного лучше, предоставив ему некоторую структуру, а затем сделав его json для удобства использования javascript:

$sqlResult = ...; 
$responseArray = array(); 
$responseArray['result'] = true; //or false if it failed 
$responseArray['data'] = $sqlResult; 
print json_encode($responseArray); 

Прежде чем вы сможете действительно ожидать, что страница будет правильно отвечать на ответ ajax, вы должны быть уверены, что ваши данные ответа правильно разбираются.

Внутри вашей функции успеха, попробуйте console.log'ing свой ответ, чтобы увидеть, как это выглядит

console.log(data); 

, если есть что-то вы можете ссылаться на данные возврата, которая является надежной, сделать чек это:

success: function(data) { 
    if(data.result == 'true') { 
    $('someElement.someClass').someFunction(); 
    } 
}