带有表单值的 jQuery AJAX 提交

Question

我编写了一些 jQuery 代码，它向我的 CMS 发送 AJAX 请求，以根据请求中发送的操作触发不同的 PHP 操作。

这工作正常，但是表单的值没有随 AJAX 帖子一起发送。我尝试了各种不同的方法，例如新表单和序列化表单数据，但似乎没有什么对我有用。

我认为仅将其包含在通话中就足够了：

$formData = $('#checkout-cart').serialize();
data: $formData,  

谁能指点我正确的方向？

var formSubmit = {
    config: {
        guestUser: '.create-guest-user',
    },
    initialize: function () {
        var $this = this;
        $(this.config.guestUser).click(function(event) {
            event.preventDefault();
            $this.createGuestUser();
            return false;
        });
    },
    // Create Guest User
    createGuestUser: function (elem) {
        $.post(window.location.href, {
            type: 'ajax',
            data: $formData,
            url: window.location.href,
            action: 'createGuestUser',
        }).done(function (response) {
            $('.create-guest-user').addClass('disabled');
        });
    }
};

$(document).ready(function () {
    formSubmit.initialize();
});

HTML

<form id="checkout-form" action="cart/checkout/" method="post">
  <div class="row">
    <div class="col-sm-6">
      <fieldset id="account">
        <legend>Your Personal Details</legend>
        <div class="form-group" style="display: none;">
          <label class="control-label">Customer Group</label>
          <div class="radio">
            <label>
              <input type="radio" name="customer_group_id" value="1" checked="checked">
              Default
            </label>
          </div>
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-firstname">First Name</label>
          <input type="text" name="firstname" value="" placeholder="First Name" id="input-payment-firstname" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-lastname">Last Name</label>
          <input type="text" name="lastname" value="" placeholder="Last Name" id="input-payment-lastname" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-email">E-Mail</label>
          <input type="text" name="email" value="" placeholder="E-Mail" id="input-payment-email" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-telephone">Telephone</label>
          <input type="text" name="telephone" value="" placeholder="Telephone" id="input-payment-telephone" class="form-control">
        </div>
      </fieldset>
    </div>
    <div class="col-sm-6">
      <fieldset id="address" class="required">
        <legend>Your Address</legend>
        <div class="form-group">
          <label class="control-label" for="input-payment-company">Company</label>
          <input type="text" name="company" value="" placeholder="Company" id="input-payment-company" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-address-1">Address 1</label>
          <input type="text" name="address_1" value="" placeholder="Address 1" id="input-payment-address-1" class="form-control">
        </div>
        <div class="form-group">
          <label class="control-label" for="input-payment-address-2">Address 2</label>
          <input type="text" name="address_2" value="" placeholder="Address 2" id="input-payment-address-2" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-city">City</label>
          <input type="text" name="city" value="" placeholder="City" id="input-payment-city" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-postcode">Post Code</label>
          <input type="text" name="postcode" value="" placeholder="Post Code" id="input-payment-postcode" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-country">Country</label>
          <select name="country_id" value="" id="input-payment-country" class="form-control">
            <option value="244">Aaland Islands</option><option value="1">Afghanistan</option>
          </select>
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-zone">Region / State</label>
          <select name="zone_id" value="" id="input-payment-zone" class="form-control">
          </select>
        </div>
      </fieldset>
    </div>
  </div>

  <div class="buttons">
    <div class="pull-right">
      <button id="button-guest" class="btn btn-primary create-guest-user get-shipping-methods" data-loading-text="Loading...">Continue</button>
    </div>
  </div>

</form>

Answer 1

请将 url 属性添加到您的$.post

  var formSubmit = {
      config: {
          guestUser: '.create-guest-user',
      },
      initialize: function () {
          var $this = this;
          $(this.config.guestUser).click(function(event) {
              event.preventDefault();
              $this.createGuestUser();
              return false;
          });
      },
      // Create Guest User
      createGuestUser: function (elem) {
          $.ajax({
              type: 'post',
              data: $formData,
              url: 'url.php'
          }).done(function (response) {
              $('.create-guest-user').addClass('disabled');
          });
      }
  };

  $(document).ready(function () {
      formSubmit.initialize();
  });

Answer 2

$.post 的第二个参数只是发布数据，而不是选项参数。如果要传递选项，则需要使用$.ajax，而不是$.post。

您还需要在进行 AJAX 调用时更新 $formData，否则您会从页面最初加载时获取表单的值。

$.ajax 没有 action 选项。如果要添加表单输入中没有的其他 POST 参数，则需要将它们添加到 $formData。

createGuestUser: function (elem) {
    var $formData = 'action=createGuestUser&' + $('#checkout-cart').serialize();
    $.ajax({
        type: 'post',
        data: $formData,
        url: window.location.href,
    }).done(function (response) {
        $('.create-guest-user').addClass('disabled');
    });
}