个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 00:42:41 26 4
gpt4 key购买 nike

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

我正在研究 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 (并将事件绑定(bind)到表单而不是提交按钮):

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

如果想在特定点提交表单，可以使用then $("#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

已在 fiddle 中更正。

关于javascript - Jquery 不会阻止提交按钮操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30262895/

26 4 0
文章推荐： php - file_get_contents() 没有响应 - php
文章推荐： node.js - 如何在 Node.js 中使用 MathJax 将 LaTeX 更改为 MathML？
文章推荐： javascript - 在 for 中同步进行异步调用
文章推荐： php - PHP 中的 AWS Cognito 开发人员身份验证
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com