javascript – Jquery不会阻止提交按钮操作

你能帮我解决这些问题吗：

我正在进行 PHP-Jquery-AJAX-JSON搜索,想法是有一个 PHP表单,在那里键入特定员工的ID,然后通过AJAX显示div中的名称始终以相同的PHP形式.

我的问题是,我可以显示我想在div中显示的消息,因为当我按下提交按钮时,它总是重定向到表单中指定的操作页面,而不是只显示消息到div中,所以你能告诉我吗我有什么问题？正如您将看到的,我在代码中指定了e.preventDefault(),如下所示：

$(document).ready(function() {
 $("#submit_id").click(function (e) {
   e.preventDefault();
   var id = $("input#ID_id");   

  if(validaForm(id)){ 

  $("#submit_id").hide();
  var url = $("#form_id").attr('action'); 
  var data = $("#form_id").serialize();   
  var type = $("#form_id").attr('method');

  $("#LoadingImage").show();
  $("#ajax_id").html("<div class='cargando'> realizando busqueda</div>");

$.ajax({
    url:url,          
    data:data,       
    type:type,      
    cache: false,  
    contentType: "application/x-www-form-urlencoded", 
    dataType: 'json', 
    encode: true

    .done(function(data) {   // using the done promise callback
       if ( ! data.success) {
        $("#LoadingImage").fadeOut();
          if (data.errors.ID_name) {
           $("#ajax_id").html("<div class='cargando'> Debe especificar el ID</div>");           
            } // if

        } // if 
        else {
            $("#ajax_id").html("<div class='cargando'> Tudo Ben</div>");
        } // else
    }) // done-promise


    .fail(function(data) {   // using the fail promise callback

        console.log(data);
    }); // fail-promise

    }); // AJAX call

  } // validaForm*/
            });
    });

    function validaForm(id){
        var id_val = id.val().trim();
        if((id_val=="") || id_val.replace(/s+/,'') == ''){
            alert("Favor ingrese el ID");
            id.addClass("posicionamiento");
            $("#div_id").html("<div class='error'>Debe especificar el nombre</div>");
            return false;
        }else{  
        id.removeClass("posicionamiento");
        $("#div_id").empty();
        }
        return true;
    }

HTML：

<html>
  <head>
    <title>BUSCADOR</title>
  </head>
  <body>
    <form method="post" id="form_id" action="process.PHP">
      <fieldset>
        <legend>Buscador Asincrono</legend>
        <p>ID a buscar: <input type="text" name="ID_name" id="ID_id"/>
          <div id="estado_id"></div></p>
        <p><input type="submit" id="submit_id" value="Buscar"/></p>
        <img src="imagenes/cargando.gif" id="LoadingImage" style="display:none" align="center"/> <div id="ajax_id" align="center"></div>
      </fieldset>
    </form>
  </body>
</html>

解决方法:

您试图阻止点击事件而不是提交本身.

在事件处理程序中使用.submit(doc)而不是.click(并将事件绑定到表单而不是提交按钮)：

$(document).ready(function() {
 $("#form_id").submit(function (e) {
   e.preventDefault();
   // ...

如果要在特定点提交表单,可以使用$(“#form_id”).submit();

更新：我做了一个 fiddle,找出问题所在：

你太迟了关闭你的.ajax():-)

$.ajax({
// ... 
    .done(function(data) {   // using the done promise callback
    // ...
    }) // done-promise
    .fail(function(data) {   // using the fail promise callback
    // ...
    }); // fail-promise
}); // AJAX call

将其更改为：

$.ajax({
   // ... 
}) // AJAX call
.done(function(data) {   // using the done promise callback
   // ...
}) // done-promise
.fail(function(data) {   // using the fail promise callback
    // ...
}); // fail-promise

它在小提琴中被纠正了.

javascript – Jquery不会阻止提交按钮操作

相关推荐