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

Posted 2023-05-07

【中文标题】如何在不返回 false 的情况下修复 div 中的返回 Ajax

【英文标题】：How to fix return Ajax in a div without return false

【发布时间】：2017-04-29 15:54:24

【问题描述】：

我正在开发一个 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");
            
        );
    );
;

【问题讨论】：

从代码中删除document-ready处理程序，即$(function() ... )并使用type="button"

嘿 Satpal，你的回答很完美，但我必须保留 type="submit" ...我不知道你是否有解决方案

将 return false 放在 ajax 调用的末尾，而不是内联按钮属性。否则，您需要为 onclick 创建一个匿名函数包装器并从中返回 false。

@TomLgl-dcl 您的意思是说 ajax 必须更新 div 内容，并且按钮必须能够再次单击..这对您不起作用..对吗？跨度>

目前还不清楚您的预期行为是什么。您想在 ajax 完成后提交form 还是什么？你说：I can not reuse the button on which I made my onclick 但是在你发布的代码中，如果nom 没有改变，那么你通过点击同一个按钮看不到任何变化，它会一次又一次地返回相同的结果

【参考方案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" />

希望这会有所帮助。

【讨论】：

嘿 Zakaria 感谢您的回复，我尝试一下很好，但我必须保留提交类型...因为此按钮用于其他操作。如果没有办法，我会创建另一个按钮。

好的 A. Wolff 所以这就像我返回 false，但我不能重用按钮

@TomLgl-dcl 你必须明确提交。

but I can not reuse the button on which I made my onclick (to call my javascript function and so the ajax call). 正如 OP 所说..这个问题呢？

这毫无意义@RajshekarReddy 如果页面没有刷新并且确定他可以重复使用它，按钮就在那里。

【参考方案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;
;

【讨论】：

如果在提交的 onclick 上调用的函数返回 false，则不应提交。请尝试一下。

onclick="return affOtp();"

你的函数有一个返回值，所以当它执行并返回值时，你的调用中应该写onclick="return fnname()"。

@codemonkey65 我试过你的解决方案，没用，和只用return false的结果一样。

【参考方案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");
            
        );
;

【讨论】：

结果很适合显示 affOtp 函数的结果，但第二个功能不起作用.. 我想我会找到另一个解决方案或创建其他按钮，即使那不'不想要我的老板！感谢您花时间帮助我 Rajshekar。

@TomLgl-dcl second fonctionnality doesn't work你能详细说明一下吗？

如果我尽可能容易地解释这一点。我之前的另一个程序员使用 Générer 按钮提交并在屏幕上显示一个数组（这是行不通的）。而且我必须使用相同的按钮来显示另一个数组，但我无法触摸他的代码并将我的功能添加到此。因为它是不同的东西。我必须同时使用提交和按钮类型。你明白了 ？或者你想要所有的页面代码。

@TomLgl-dcl 是的，明白了。现在你所要做的就是调试现有代码，看看调用了什么函数，然后插入你的函数调用。如果你不知道怎么做，你也必须发布其他开发人员的代码。。

感谢您的帮助 Rajskar 我很感激！我要调试，是的，好的解决方案！