使用Ajax提交2种不同的PHP表单

Question

我想使用2个不同的PHP页面发送2个具有不同值的表单时遇到问题。

我的ajax代码如下：

        $(document).ready(function() {
          var form = $('#main_form_new');
          var submit = $('.sbbtn');
          var alert = $('.form_result');
          form.on('submit', function(e) {
            e.preventDefault();

            $.ajax({
              url: 'ajax/category.php',
              type: 'POST',
              dataType: 'html',
              data: form.serialize(),
              beforeSend: function() {
                alert.fadeOut();
                submit.html('Saving Changes....');
              },
              success: function(data) {
                alert.html(data).fadeIn();
                form.trigger('reset'); // reset form
                submit.html('Save Changes');
              },
              error: function(e) {
                console.log(e)
              }
            });
          });
          });

对于第二种形式，我更改了var并将其替换为

          var itemform = $('#item_main_itemform_new');
          var itemsubmit = $('.itemsbbtn');
          var itemalert = $('.item_itemform_result');
          itemform.on('submit', function(e) {
            e.preventDefault();

            $.ajax({
              url: 'ajax/items.php',
              type: 'POST',
              dataType: 'html',
              data: itemform.serialize(),
              beforeSend: function() {
                itemalert.fadeOut();
                itemsubmit.html('Saving Changes....');
              },
              success: function(data) {
                itemalert.html(data).fadeIn();
                itemform.trigger('reset'); // reset itemform
                itemsubmit.html('Save Changes');
              },
              error: function(e) {
                console.log(e)
              }
            });
          });

这是行不通的，因为我真的不知道原因。我在哪里做错了？

Answer 1

不要重复自己。

如果需要两次相同的功能，请不要复制和粘贴代码。创建一个函数，将变量用作变量部分，两次调用该函数。

$(function() {
    function formSubmitHandler(options) {
        return function (e) {
            var $form = $(this),
                $submit = $(options.submit),
                $alert = $(options.alert);

            e.preventDefault();

            $alert.fadeOut();
            $submit.html('Saving Changes...').prop({disabled: true});

            $.post(options.url, $form.serialize())
            .done(function (data) {
                $alert.html(data).fadeIn();
                $form.trigger('reset');
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                $alert.html(textStatus).fadeIn();
                console.log(arguments);
            })
            .always(function () {
                $submit.html('Save Changes').prop({disabled: false});
            });
        };
    }

    $('#main_form_new').submit(formSubmitHandler({
        url: 'ajax/category.php',
        submit: '.sbbtn',
        alert: '.form_result'
    }));

    $('#item_main_itemform_new').submit(formSubmitHandler({
        url: 'ajax/items.php',
        submit: '.itemsbbtn',
        alert: '.item_itemform_result'
    }));
});