通过 AJAX 表单提交发送阻止的默认提交按钮

Question

我有一个表单，我通过ajax将其发送到php文件以操作数据库。

//.html

<form id='editUserForm' action='insert.php' method='post'>
  <input type='text' name="userName/>
  <input type='text' name="userLastName/>
  <input type='submit' name='editUser' value='submit'/>
</form>

/

/阿贾克斯

    (function($){
    function processForm( e ){
        $.ajax({
            url: 'insert.php',
            dataType: 'text',
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: $(this).serialize(),
            success: function( data, textStatus, jQxhr ){
                alert("Done");
            error: function( jqXhr, textStatus, errorThrown ){
                console.log( errorThrown );
            }
        });
        e.preventDefault();
    }
    $('#editUserForm').submit( processForm );
})(jQuery);

插入.php

  if(isset($_POST['editUser'])){
if(isset($_POST['chUserStatus'])){
    $active='َactive'; 
}else{$active='disabled';}
$query="update admins set user='$_POST[chUserName]', pass='$_POST[chUserPass]',email='$_POST[chUserEmail]',level='$_POST[chUserLevel]',status='$active' where id=$_POST[userId]";
$result=mysqli_query($dbCnn,$query);
echo(mysqli_error($dbCnn));

}问题就在这里，因为我的函数阻止表单默认提交，它不会发布提交 btn 名称/值以插入.php。如何将其作为参数发送以插入.php？

Answer 1

serialize()不会

从button元素中检索任何属性，如果需要，您需要自己添加该信息：

var $button = $('#editUser :submit');
// in the $.ajax...  
data: $(this).serialize() + '&' + $button.prop('name') + '=' + $button.val(),

Answer 2

$("#search").submit(function(e){
  e.preventDefault();
  $.ajax({
            url: 'insert.php',
            dataType: 'text',
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: $(this).serialize(),
            success: function( data, textStatus, jQxhr ){
                alert("Done");
            },
            error: function( jqXhr, textStatus, errorThrown ){
                console.log( errorThrown );
            }
        });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search">
<input name="q"/>
  <input type="submit" value="Submit"/>
</form>

在控制台中查看结果。

Answer 3

您可以在序列化之前将其放入表单数据对象中，甚至可以在序列化后附加它。就个人而言，我只会添加一个新的隐藏输入，例如：

<input type="hidden" name="action" value="editUser" />