为什么这个ajax表单不工作？

Question

我想提交一个使用jQuery的表单，但由于某种原因我的表单不工作。当我提交除#loading之外的表单时，没有任何反应出现。

控制台显示没有数据正在发送。我试图避免使用'序列化'发送表单。任何建议都会很棒。非常感谢。

$(document).ready(function() { 
    $("#loading").hide(); 

    $("#submit_details").on("click", function(e) { 
     $("#loading").show(); 
     e.preventDefault(); 

     var user_name = $("#user_name").val(); 
     var details = $("#details").val(); 
     var user_id = $("#user_id").val(); 
     var title = $("#title").val(); 

     $.post('process_details.php', { 
      title: title, 
      user_name: user_name, 
      details: details, 
      user_id: user_id 
     }, function(data) { 
      $("#loading").hide(); 
      $("#message").html(data); 
      $("#message").fadeIn(500); 
     }); 
     return false; 
    }); 
}); 

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form"> 
    <input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required=""> 
    <input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value=""> 
    <input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>"> 
    <input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>"> 

    <button type="submit" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details"> 
     Submit 
    </button> 
    <span class="pull-right"> 
     <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i> 
    </span> 

Answer 1

尝试这种

1）按钮类型= '按钮'，以防止默认表单提交。

2）</form>结束标记丢失。 3）隐藏ajax成功后的加载。

4）改变id的值是没有详细的细节var details = $("#detail").val();

5）你有回音或返回从process_details.php页中的任何HTML内容，阿贾克斯成功或回报。

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form"> 
<input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required=""> 
<input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value=""> 
<input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>"> 
<input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>"> 

<button type="button" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details"> 
    Submit 
</button> 
<span class="pull-right"> 
    <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i> 
</span> 

<script> 

$(document).ready(function() { 

$("#loading").hide(); 

$("#submit_details").on("click", function(e) { 

    e.preventDefault(); 

    $("#loading").show(); 

    var user_name = $("#user_name").val(); 
    var details = $("#detail").val(); 
    var user_id = $("#user_id").val(); 
    var title = $("#title").val(); 

    $.post('process_details.php', { 
     title: title, 
     username: username, 
     details: details 
     user_id: user_id 
    }, function(data) { 

     alert(data); 
     $("#message").html(data); 
     $("#message").fadeIn(500); 
     $("#loading").hide(); //hide the loading after ajax success 
    }); 
    return false; 
}); 
}); 

    </script>