如何在不返回 false 的情况下修复 div 中的返回 Ajax

Question

我正在开发一个 Web 应用程序，但我遇到了 Ajax 返回的问题。

我可以看到AJAX返回的结果，但是我的问题是这个结果出现然后消失。我找到了一个返回 false 的解决方案，问题是一旦显示完成并返回 false，我的 div 仍保留在页面上，但我无法重用我在其上进行 onclick 的按钮（调用我的 javascript 函数等等ajax 调用）。

如果有人有解决方案。

这是代码：

<input class="Admin-Bouton" type="submit" onclick="affOtp();return false" value="Générer" form="formParametres" />

<div id="syntheseOTP"></div>

function affOtp() {
    $(function(){
        $.ajax({
            url: 'vue/ressources/affOtp.php',
            type: 'POST',
            dataType: 'html',
            data: { idEmploye: nom },
            success: function(msg) {
                console.log(msg);
                document.getElementById("syntheseOTP").innerHTML = msg;
            },
            error: function(resu, statut, erreur) {
                console.log(erreur);
                alert("papa");
            }
        });
    });
};

Answer 1

发生这种情况是因为将提交表单并刷新页面，您可以通过使用类型 button 而不是 submit 来避免这种情况：

<input id="Admin-Bouton" class="Admin-Bouton" type="button" onclick="affOtp();return false" value="Générer" form="formParametres" />

我建议在 js 代码中附加事件 click 而不是 inline-event onclick ：

$('#Admin-Bouton').on('click', affOtp);

HTML 会是这样的：

<input id="Admin-Bouton" class="Admin-Bouton" type="button" value="Générer" form="formParametres" />

希望这会有所帮助。

Answer 2

编辑：在 affOtp() 之前省略了“返回”；

<input class="Admin-Bouton" type="submit" onclick="return affOtp();" value="Générer" form="formParametres" />

<div id="syntheseOTP"></div>

function affOtp() {
        $(function(){
            $.ajax({
                url: 'vue/ressources/affOtp.php',
                type: 'POST',
                dataType: 'html',
                data: { idEmploye: nom },
                success: function(msg) {
                    console.log(msg);
                    document.getElementById("syntheseOTP").innerHTML = msg;
                },
                error: function(resu, statut, erreur) {
                    console.log(erreur);
                    alert("papa");
                }
            });
    });
    return false;
};

Answer 3

由于没有一个答案仍然适合您，我建议您进行以下更改（请记住，您不想更改 type="submit"）。

<input id="AjaxButton" class="Admin-Bouton" type="submit" value="Générer" form="formParametres" />
<!-- remove onlick attribute and add a Id attribute in above line -->

<div id="syntheseOTP"></div>

现在确保在脚本中添加点击事件处理程序。

$('#AjaxButton').on('click',affOtp);

function affOtp(e) {  // add e as input parameter
                      // removed unnecessary wrapper
    e.preventDefault(); // this will now stop the click event.

    $("#syntheseOTP").html("Loading...."); // add loading text into div
        $.ajax({
            url: 'vue/ressources/affOtp.php',
            type: 'POST',
            dataType: 'html',
            data: { idEmploye: nom },
            success: function(msg) {
                console.log(msg);
                $("#syntheseOTP").html(msg); //refactored to use jquery syntax
            },
            error: function(resu, statut, erreur) {
                console.log(erreur);
                alert("papa");
            }
        });
};