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

use jquery / ajax to execute php function and display message

本文关键字：函数 显示 消息 PHP 执行 jquery ajax 使用      更新时间：2023-09-26

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

我尝试使用一些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>

显然也 

<?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;    
    });
});

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请求。

当它是一个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;
}
?>

(显然也)

接下来，让我们创建一个新函数(我们刚刚在上面使用过)，以便检测我们是否正在接收AJAX请求。

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

最后，确保您print(或echo)您的消息。这将是AJAX响应(*)，它将被发送回您的JavaScript。

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
    }
}

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

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

和更新你的JavaScript post URL:

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

或者，像这样停止单击函数中的默认事件:

$("a#update_link").click( function(event) { 
  event.preventDefault();
相关文章：