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代码中附加事件点击而不是内联事件onclick：

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

HTML就像：

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

希望这有帮助。

Answer 2

编辑：遗漏＆＃34;返回＆＃34;在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");
            }
        });
};

如何修复div中返回Ajax而不返回false

3 个答案: