Question

对于我的个人项目，我正在努力建立一个积分系统。基本上我想要做的是：单击一个按钮（Jquery），然后向数据库发送一个查询，最后向用户显示自动更新的点。我想我可以使用ajax。

$(this).html('Thank you for granting EXP!');
var dataString = 'username=' + username+ '&name='+ name + '&count=' + count + '&message_id=' + message_id;

    $.ajax({
    type: "POST",
    url: "index.php?&page=profile",
    data: dataString,
    success: function() {
        $('#skills').load('./modules/skill_table.php');
    }
    });

此Ajax请求请求正确的页面。在该页面上有一个MySQLi查询，它也可以正常执行。问题是我想在完成查询后重新加载显示点的正确div。当它重新加载div时，我没有看到任何变化。关于我能做什么的任何建议？我是这样的ajax调用的新手。我可以用（数据）响应做一些事情，但这是否意味着我必须为这个请求写一个单独的php文件？

编辑：上面的代码有效。它执行MySQL Query并更新数据库。 .load（）;功能也工作！当我尝试.load（'someotherfile.php'）;它显示另一个文件。问题是：当我尝试重新加载当前模块时（skill_table.php）它显示旧值而不是更新值。我希望这个解释有点好。

它使用新的数据库值重新加载skill_table.php模块，但它显示旧的数据库。

Answer 1

这是一个更完整的示例，介绍如何制作有效的POST请求并在AJAX中捕获响应并一次性返回。这只是众多方法中的一种，请知道这个例子含糊不清。请从中学习并根据您的需要进行塑造。

您的AJAX请求

$.post(
    // This is the URL your posting to
    'index.php?page=profile', 
    // This is the JSONified version of your post data
    {
        "username":username,
        "name":name,
        "count":count,
        "message_id":message_id
    }, 
    // Handling your response here
    function(returnString) {
        // Check to ensure your php code worked
        if(returnString.success === 1) {
            // Insert your new DOM
            $('#skills').html(returnString.response);
        } else {
            // Send error message here
            window.alert('Oh noes! The world is ending!');
            // alertnatively
            //window.alert('Error:' + returnString.response);
        }
    }
);

假设的PHP文件

header("Content-type: application/json");

$mysqli->doMyAwesomeMySQLQueryHere();
$success = ($DidMyQueryWork) ? true : false;

echo json_encode(
        array(
            'success' => $success, 
            'response' => 'Your DOM Here'
        )
);

Answer 2

.load从缓存中拉出。如果这是一个GET请求，你可以告诉它不要使用缓存，但由于你正在进行POST，你必须在加载的URL的末尾添加一些随机的随机元素。试试这个：

 $.ajax({
    type: "POST",
    url: "index.php?&page=profile",
    data: dataString,
    success: function() {
        $('#skills').load('./modules/skill_table.php?_=' + (new Date()).getTime();
    }
    });

此外，由于您正在使用jQuery，请查看.serialize（）以帮助从数组构造dataStrings。

http://api.jquery.com/serialize/

Answer 3

您需要正确构建数据参数。 IE，让jQuery构建它：

$(this).html('Thank you for granting EXP!');    
    $.ajax({
    type: "POST",
    url: "index.php?&page=profile",
    data: {'username' : username, 'name' : name, 'count' : count, 'message_id' = message_id },
    success: function() {
        $('#skills').load('./modules/skill_table.php');
    }
});

Answer 4

最好将你的表或html发送到ajax响应中（只发送一个请求）：

$.ajax({
  type: "POST",
  url: "index.php?page=profile",
  data: dataString,
  async:false,
  success: function(data) {
      $('#skills').html(data);
  }
});

index.php：

include('./modules/skill_table.php');

在mysql更新到数据库后显示更改

4 个答案: