具有表單值的jQuery AJAX提交

Question

我已經編寫了一些jQuery代碼，該代碼將AJAX請求發送到CMS，以根據請求中發送的操作觸發不同的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');
    });
}