Question

你可以帮我解决这些问题：

我正在进行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>

Answer 1

您正在尝试阻止点击事件而不是提交本身。

在事件处理程序中使用.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

在小提琴中纠正了。

Jquery不会阻止提交按钮操作

1 个答案: