Question

我正在尝试在提交操作结束时在表单上显示警告。

我的js功能：

    function submitForm(){

    // Initiate Variables With Form Content
    var nomeCompleto = $("#nomeCompleto").val();
    var email    = $("#email").val();
    var telefono = $("#telefono").val();
    var username = $("#username").val();
    var password = $("#password").val();
    var parametros = {
                  "nomeCompleto" : name,
                  "email"        : email

          };

          $.ajax({
                type: "POST",
                url: "adminRegistro.php",
                data: parametros,
                async:false,
                success: function(result){
                  var parsedData = JSON.parse(result);

                    $("#ajax-alert").addClass("alert alert-danger").text(parsedData.msg);
                    $("#ajax-alert").alert();
                    $("#ajax-alert").fadeTo(5000, 5000).slideUp(5000, function(){
                    });
                }
          });
}

在触发成功时调用警报，但警报仅在很短的时间内出现（因为页面被重新加载）。使用ajax调用myn错误在哪里？

编辑：

尝试后，我改变了我的html按钮代码：

<input class="btn btn-success submit-button" value="Submit"  onclick="myFunction()"/></input>
<input class="btn btn-success submit-button" value="Submit"  id=  "btnSubmit"/></input>

和js：

$(document).ready(function (){

     $("#btnSubmit").click(function(){
     ....

它运作良好。使用$("#btnSubmit").click(function(e){ e.preventDefault();似乎没有效果。

Answer 1

您需要preventDefault()。 preventDefault()方法如果事件可取消，则取消该事件，这意味着默认操作属于该事件的将不会发生。

请尝试以下代码：

function submitForm(e){

    e.preventDefault(); //This will stop from reloading
// Initiate Variables With Form Content
    var nomeCompleto = $("#nomeCompleto").val();
    var email    = $("#email").val();
    var telefono = $("#telefono").val();
    var username = $("#username").val();
    var password = $("#password").val();
    var parametros = {
              "nomeCompleto" : name,
              "email"        : email

      };

      $.ajax({
            type: "POST",
            url: "adminRegistro.php",
            data: parametros,
            async:false,
            dataType: 'json',
            success: function(parsedData){
                $("#ajax-alert").addClass("alert alert-danger").text(parsedData.msg);
                $("#ajax-alert").alert();
                $("#ajax-alert").fadeTo(5000, 5000).slideUp(5000, function(){
                });
            }
      });
 }

Jquery Ajax调用 - 成功时的Bootstrap警报

1 个答案: