Question

我要在这里执行的操作是在页面上有一个按钮，该按钮可以在不刷新页面的情况下提醒一些数据（数据是密码，这就是为什么我不希望将其写入代码中的原因）。

到目前为止，我的实际页面运行良好，页面的第一部分：

<?php
session_start();

if (!isset($_SESSION['id']))
    header('location: index.php');
else
{
    $id = strip_tags($_SESSION['id']);
    $username = strip_tags($_SESSION['username']);
    $role = strip_tags($_SESSION['role']);

    require('config/functions.php');

    if (isset($_POST['idSite']) AND !empty($_POST['idSite'])) {
        $idSite = htmlspecialchars($_POST['idSite']);

        $connexionInfos = getConnexionInfos($idSite);
    }
}?>

第二部分：

<!DOCTYPE html>
<html>

<head>
    <title>Telem MCS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("#passCo").click(function(){
            var idTelem = <?= $idSite ?>;
            $.post("config/get_pass.php",
            {
              searchFor: idTelem
            },
            function(data,status){
              alert("Password: " + data);
            });
          });
        });
    </script>
</head>

<body>
    <div class="tabs_content">
        <div class="tab_content" id="connexion">
            <div class="form_info">
                <form>
                    <div id="except_procedure">
                    <?php foreach($connexionInfos as $connexionInfo): ?>
                        <div class="form-style-2">
                            <label for="field1"><span>Type de connexion </span>
                                <select name="field1" class="select-field" disabled="disabled">
                                    <option value=""><?= $connexionInfo->TYPECONNEXION ?></option>
                                </select>
                            </label>
                            <label for="field2"><span>Configuration VM </span>
                                <input type="text" class="input-field" name="field2" value="<?= $connexionInfo->TYPEVM ?>" disabled="disabled"/>
                            </label>
                    <?php endforeach; ?>
                            <label for="field5"><span>PASSWORDS</span>
                                <button id="passCo">PASS</button>
                            </label>
                        </div>
                    <?php foreach($connexionInfos as $connexionInfo): ?>
                        <div class="form-style-2">
                            <label for="field6"><span>Procedure </span>
                                <textarea name="field6" class="textarea-field" disabled="disabled"><?= $connexionInfo->PROCEDURE ?></textarea>
                            </label>
                        </div>
                    <?php endforeach; ?>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

最后是应该在后台调用数据的“ get_pass.php”文件：

<?php

require('connect.php');
if (isset($_POST['searchFor'])) {
    $idTelem = strip_tags($_POST['searchFor']);
    $req = $bdd->prepare("SELECT NOMTELEM FROM histotelem WHERE IDHISTOTELEM = '".$idTelem."'");
    $req->execute(array($idTelem));
    $keys = $req->fetchAll(PDO::FETCH_OBJ);
    $req->closeCursor();
    foreach ($keys as $key) {
        echo $key->NOMTELEM;
     } 
}
else {
    echo "oups !";
}

这样可以正常工作，我可以单击按钮，在警报中获取数据，但是一旦验证警报，页面就会刷新，并且不再获取原始显示的数据...

希望有人对这里发生的事情有个了解

Answer 1

由于button元素中的默认type是"submit"，因此浏览器正在提交表单。

为防止发生这种情况，请在您的click处理程序中将事件对象作为第一个参数，并对其调用preventDefault：

$("#passCo").click(function(e){
    e.preventDefault();
    // ...
});

或者，您可以将type="button"添加到button，但是在关闭JavaScript的浏览器中，该按钮将不起作用。（我不知道您是否正在处理该案件，但是...）

为什么我的Ajax函数不是异步的并刷新页面？

1 个答案: