Question

我想更新数据库字段。我可以通过以下代码实现它，但这需要刷新页面，我无法显示有关操作结果的消息。

我尝试使用一些JQ脚本没有成功（它对我来说太神秘了，但是，我的学习计划还没有）。

请你帮我用ajax / jquery来实现这个目标吗？

的index.php

include ("functions.php");

if (isset($_GET['user_id'])) {
    $user_id = $_GET['user_id'];
    update_time($user_id);
}    

?>
<html>
    <head>
        <title>Update Time</title>
    </head>
    <body>
        <div id="msg"></div>
        <a id="update_link" href="index.php?user_id=user_id">Update Time</a>
    </body>
</html>

的functions.php

<?php 
    function user_exist(){
        //run an SQL query to check if the user exist
        if (exist)
            return true;
        else
            return false;
    }

    function update_time($user_id){
        if(user_exist())
            //display a message in #msg that the time was updated
            //update the database
        else
            //display a message in #msg that the user does not exist
    }

?>

脚本

$("a#update_link").click( function() {

    $.post( $(this).attr("href"),
            function(data) {
              if (data == "Time Updated") {
                  window.location = "index.php";
              }
              $("div#msg").html(data);
            });

    $(this).click( function() {
       return false;    
    });

});

Answer 1

为了防止页面重新加载，您可以将href属性更改为：

<a id="update_link" href="#" data-link="index.php?user_id=user_id">Update Time</a>

并更新您的JavaScript帖子网址：

$.post( $(this).data("link"),

或者，在您的点击功能中停止默认事件，如下所示：

$("a#update_link").click( function(event) { 
  event.preventDefault();

Answer 2

HTML（index.php）

为了使用jQuery，您必须先在代码中包含脚本文件。

<html>
    <head>
        <title>Update Time</title>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="function.js"></script>
    </head>
    <body>
        <div id="msg"></div>
        <a id="update_link" href="index.php?user_id=user_id">Update Time</a>
    </body>
</html>

JS（function.js）

接下来，您要将“click”事件处理程序附加到#update_link元素。将事件处理程序附加到链接时，您希望阻止它使用e.preventDefault()执行重定向到其他页面的默认行为。

// shorter syntax for document.ready
$(function () {
    // attach a click event handler
    $('#update_link').click(function(e) {
        // prevent the click from redirecting
        e.preventDefault();
        // make an AJAX request
        $.post($(this).attr('href'), function (res) { 
            // handle the response (*) by storing the message into the DIV#message
            $('#msg').html(res);
        });
    });
});

<强> PHP

现在，您正在向同一个URL（index.php）发出AJAX请求。通常最好有一个单独的脚本来处理AJAX请求 - 但我们将使用您当前的设置。这意味着您的页面需要能够处理两种不同的请求：AJAX请求和非请求。

当它是一个AJAX请求时，我们只想输出一条HTML消息。如果不是，我们想输出HTML页面。

（适用的index.php）

所以，首先让我们再次修改你的页面。

<?php include 'functions.php'; // check if the request was made via AJAX if (is_ajax() && isset($_GET['user_id'])) { // update and print (not return) a message update_time($_GET['user_id']); // stop the script from outputting the rest exit; } ?>

（适用的functions.php）

接下来，让我们创建一个新功能（我们刚刚在上面使用过），以方便detect whether we are receiving an AJAX request。

function is_ajax() { return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'; }

最后，确保您print（或echo）您的邮件。这将是将发送回JavaScript的AJAX响应（*）。

function update_time($user_id){ if (user_exist()) { //update the database //print a message that the time was updated } else { //print a message that the user does not exist } }

使用jquery / ajax执行php函数并显示消息

2 个答案: