如何调用rails方法在成功后从jQuery中创建(function(json)?

时间:2016-07-29 07:28:40

标签: ruby-on-rails

我有数据表单:

<div class="container">
    <div class="row-fluid">
      <%= form_tag class: "form-horizontal" id: "payment-form" %>
        <%= hidden_field "card_registration_url", card_preregistration['CardRegistrationURL'] %>
        <%= hidden_field "preregistration_data", card_preregistration['PreregistrationData'] %>
        <%= hidden_field "access_key", card_preregistration['AccessKey'] %>
        <%= hidden_field "id_card", card_preregistration['Id'] %>

        <fieldset>
          <div id="legend">
            <legend class="">Deposit for contract <%= @contract.title %></legend>
          </div>

          <div id="legend">
            <legend class="">Amount <%= @contract.amount %></legend>
          </div>

          <!-- Name -->
          <div class="control-group">
            <%= label "card_holder", "Card Holder's Name", class:"control-label" %>
            <div class="controls">
              <%= text_field_tag "card_holder", { id: "username", class: "input-xlarge"} %>
            </div>
          </div>

          <!-- Card Number -->
          <div class="control-group">
            <%= label "card_number", "Card number", class:"control-label" %>
            <div class="controls">
              <%= text_field_tag "card_number", { id: "card_number", class: "input-xlarge"} %>
            </div>
          </div>

          <!-- Expiry-->
          <div class="control-group">
            <%= label "expity_date", "Card Expiry Date", class:"control-label" %>
            <div class="controls">
              <%= text_field_tag "card_expiration_date", { id: "card_expiration_date", class: "input-xlarge"} %>
            </div>
          </div>

          <!-- CVV -->
          <div class="control-group">
            <%= label "cvv", "Card CVV", class:"control-label" %>
            <div class="controls">
              <input type="password" id="card_cvx" name="password_confirm" placeholder="" class="span2">
              <%= text_field_tag "card_expiration_date", { id: "card_expiration_date", class: "input-xlarge"} %>
            </div>
          </div>

          <!-- Save card -->
          <div class="control-group">
            <div class="controls">
               <label class="checkbox" for="save_card">
                 <%= label "save_card", class:"check_box" %>
                <input type="checkbox" id="save_card" value="option1">
                Save card on file?
              </label>
            </div>
          </div>

          <!-- Submit -->
          <div class="control-group">
            <div class="controls">
              <%= button_tag "Pay now", remote: true, class: "btn btn-success" id="process" %>
            </div>
          </div>

        </fieldset>
      <% end %>
    </div>

</div>

我通过邮寄方式将数据从表单发送到服务器支付系统(在我的示例中是

register_card.js

$('#process').click(function(){
  var valuesToSubmit = $('#payment-form').serialize();
  console.log(valueToSubmit);
  $.ajax({
    url: $('#mail-form').attr('action'), //sumbits it to the given url of the form
    data: valuesToSubmit['card_registration_url'],
    dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
  }).success(function(json){
    //act on result.
  });
  return false; // prevents normal behaviour
});

如果来自服务器的响应都很好,需要调用actions_controller / create来完成付款。

我如何调用action payments_controller / create?

1 个答案:

答案 0 :(得分:1)

要调用创建操作,您需要post方法,而且您已遵循 rails命名约定,这应该为您执行,

/payments 发布请求会将您带到付款控制器中的create操作。

所以,ajax调用你可以做,

$.ajax({
      type: "POST",
      url: "/payments"
});

$('#process').click(function(){
  var valuesToSubmit = $('#payment-form').serialize();
  console.log(valueToSubmit);
  $.ajax({
    url: $('#mail-form').attr('action'), //sumbits it to the given url of the form
    data: valuesToSubmit['card_registration_url'],
    dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
  }).success(function(json){
    $.ajax({
      type: "POST",
      url: "/payments"
    });
  });
  return false; // prevents normal behaviour
});

如果您想通过参数发送数据,您还可以从中发送数据属性,

$.ajax({
      type: "POST",
      data: valuesToSubmit['card_registration_url'],  // you can send your own data
      url: "/payments"
});