如何修复返回Ajax在一个div没有返回false

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

编辑：在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"); 
      } 
     }); 
};