首页 / JQUERY / javascript – Jquery不会阻止提交按钮操作

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Jquery不会阻止提交按钮操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2918字，纯文字阅读大概需要5分钟。

内容图文

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

我正在进行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不会阻止提交按钮操作全部内容，希望文章能够帮你解决javascript – Jquery不会阻止提交按钮操作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/725285.html

来源：【匿名】