使用AJAX serialize方法单独获取表单字段，实现多表单复用单AJAX函数

我明白你的痛点——重复写几乎一样的AJAX代码太冗余了，想要用一个函数搞定所有表单是非常合理的需求。你卡壳的点其实很好解决：serialize()方法并不会阻止你单独获取表单里的某个字段值，完全可以先拿到隐藏字段的值，再决定AJAX的请求地址。

第一步：给每个表单添加标识用的隐藏字段 #

首先，在你需要处理的每个表单里，加一个隐藏输入框，用来标记这个表单的用途：

<!-- 更新密码的表单 -->
<form name="updPass">
  <input type="hidden" name="form_action" value="password">
  <!-- 其他密码相关字段 -->
  <input type="submit" id="addNew" value="Save">
</form>

<!-- 添加房间的表单 -->
<form name="addRoom">
  <input type="hidden" name="form_action" value="add_room">
  <!-- 其他房间相关字段 -->
  <input type="submit" id="addNew" value="Save">
</form>

第二步：正确获取隐藏字段的值 #

你不需要因为用了serialize()就束手束脚，直接用jQuery或者原生JS就能轻松拿到这个隐藏字段的值，两种方式选一个就行：

• jQuery方式：通过表单元素找到对应的隐藏字段

  var formFieldToIdentify = $(form).find('input[name="form_action"]').val();
  

• 原生JS方式：利用表单的elements属性获取字段

  var formFieldToIdentify = form.elements['form_action'].value;
  

第三步：修正你的AJAX代码（注意语法错误） #

你原来的代码里把if逻辑直接写在AJAX配置对象里是不对的，得先提前判断好请求地址，再传入配置中。修正后的完整代码如下：

// 执行操作
$('#addNew').click(function() {
    var form = document.addNew;
    var dataString = $(form).serialize();
    
    // 获取隐藏字段的标识值
    var formFieldToIdentify = $(form).find('input[name="form_action"]').val();
    
    // 提前判断请求地址
    var ajaxUrl;
    if(formFieldToIdentify === 'password'){
        ajaxUrl = 'processes/settings.php';
    } else {
        ajaxUrl = 'processes/rooms.php';
    }

    $.ajax({
        type: 'POST',
        url: ajaxUrl,
        data: dataString,
        cache: false, // POST请求建议关闭缓存，避免意外问题
        beforeSend: function(){
            $('.message').hide();
            $("#addNew").val('Please wait...');
        },
        success: function(html){
            $("#addNew").val('Save');
            $('.message').html(html).fadeIn();
        },
        // 建议加上错误处理，提升用户体验
        error: function() {
            $("#addNew").val('Save');
            $('.message').html('Oops, something went wrong!').fadeIn();
        }
    });
    return false;
});

进阶优化：支持多个提交按钮（不用重复写ID） #

如果你的页面有多个表单，每个表单的提交按钮ID不一样，还可以进一步优化——给所有提交按钮加一个统一的类，然后通过closest()找到对应的表单，这样不管多少个表单都能复用同一个函数：

<!-- 密码表单的提交按钮 -->
<input type="submit" class="ajax-submit" value="Save">

<!-- 房间表单的提交按钮 -->
<input type="submit" class="ajax-submit" value="Save">

对应的JS代码：

$('.ajax-submit').click(function(e) {
    e.preventDefault(); // 用preventDefault代替return false，更符合标准
    var $btn = $(this);
    var $form = $btn.closest('form'); // 找到当前按钮所属的表单
    var dataString = $form.serialize();
    var formAction = $form.find('input[name="form_action"]').val();
    var ajaxUrl = formAction === 'password' ? 'processes/settings.php' : 'processes/rooms.php';
    var originalText = $btn.val();

    $.ajax({
        type: 'POST',
        url: ajaxUrl,
        data: dataString,
        cache: false,
        beforeSend: function(){
            $('.message').hide();
            $btn.val('Please wait...');
        },
        success: function(html){
            $btn.val(originalText);
            $('.message').html(html).fadeIn();
        },
        error: function() {
            $btn.val(originalText);
            $('.message').html('An error occurred. Please try again later.').fadeIn();
        }
    });
});

这样就彻底实现了用一个AJAX函数处理所有表单的需求，后续新增表单只要加上隐藏字段和对应的按钮类就行，非常灵活。

内容的提问来源于stack exchange，提问作者Golden Friendship Site