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

在服务器端，使用包含投票数和可能的图像路径的JSON对象响应POST请求。

然后在AJAX回调中，数据将成为该对象。然后，您可以使用jQuery选择DOM中的元素，并在其上调用.text()或.html()来更新内容。

Answer 2

如果你从PHP传回格式不正确的数据，你可以通过给它一些结构然后使它成为json的javascript易用性来使它更好一点：

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

在您真正期望页面正确响应ajax响应之前，您必须确保正确解析您的响应数据。

在您的成功函数内部，尝试使用console.log来查看您的响应，看看它是什么样的

console.log(data);

如果您可以在可靠的返回数据中引用某些内容，请检查它：

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

Answer 3

您可以使用几个不同的选项更改投票号的值或html内容，例如：

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

希望有所帮助，

丹

POST后，jquery更新html并返回mysql数据

3 个答案: