javascript - ajax的序列化方法不返回所需的值

Question

我正在尝试通过 ajax j 查询引导模式获取表单输入并将其存储到数据库中，但序列化方法没有返回所有需要的值。

它应该返回 user_id 和 btn_action 的值...我哪里出错了..？？

我尝试了很多解决方案，但无法得到任何答案......

下面是 html 和 javascript 代码。我正在使用所有必需的 jquery 资源。

<form method="post" id="user_form">
  <div class="modal-content">
  <div class="modal-header">
  <h4 class="modal-title"></i> Add User
  </h4>
  <button type="button" class="close" data-dismiss="modal">&times;
 </button>

  </div>
  <div class="modal-body">
  <div class="form-group">
<label>Enter User Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email
</label>
<input type="email" name="user_email" id="user_email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" required />
</div>
  </div>
  <div class="modal-footer">
  <input type="hidden" name="user_id" id="user_id" />
  <input type="hidden" name="btn_action" id="btn_action" />
  <input type="submit" name ="action" id= "action" class="btn btn-primary" 
   value="Add" />
  <button type="button" class="btn btn-default" data-dismiss="mo  
  dal">Close</button>
  </div>
</div>
</form>

//script code:

$(document).on('submit', '#user_form', function(event){
event.preventDefault();
$('#action').attr('disabled','disabled');
var form_data = $('#user_form').serialize();
alert(form_data);
// console.log(form_data)
$.ajax({
url:"user_action.php",
method:"POST",
data:form_data,
success:function(data)

{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled', false);## Heading ##

}
});
});

<script>

    $(document).on('click','#add_button',function(){
    $('#action').val("Insert");

    $('.modal-title').text("Add User");

    });

    $(document).on('submit', '#user_form', function(event){
    event.preventDefault();


    var form_data = $('#user_form').serialize();
    alert(form_data);//not returning the required values

    $.ajax({
    url:"user_action.php",
    method:"POST",
    data:form_data,
    contentType:false,
    processData:false,
    success:function(data)

    {
    $('#user_form')[0].reset();
    $('#userModal').modal('hide');
    $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
    $('#action').attr('disabled', false);
    userdataTable.ajax.reload();
    }
    });
    });





    });


    </script>

<!-- form -->
<form method="post" id="user_form">
  <div class="modal-content">
  <div class="modal-header">
  <h4 class="modal-title"></i> Add User</h4>
  <button type="button" class="close" data-dismiss="modal">&times;</button>

  </div>
  <div class="modal-body">
  <div class="form-group">
<label>Enter User Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email</label>
<input type="email" name="user_email" id="user_email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" required />
</div>
  </div>
  <div class="modal-footer">
  <input type="hidden" name="user_id" id="user_id" />
  <input type="hidden" name="btn_action" id="btn_action" />
  <input type="submit" name ="action" id= "action" class="btn btn-primary" value="Add" />
  <button type="button" class="btn btn-default" data-dismiss="mo  dal">Close</button>
  </div>
</div>
</form>

</div>
</div>

Answer 1

这两个隐藏的输入没有附加值，因此您不会在序列化值中找到它们，直接在 html 中或使用 javascript 向输入添加一些值

 <input type="hidden" name="user_id" id="user_id" value="some user_id"/>
 <input type="hidden" name="btn_action" id="btn_action" value="some btn_action"/>