如何在成功后从jQuery中调用rails方法(函数(Json))？

Question

我有一份有数据的表格：

<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>

我通过post方法将数据从表单发送到服务器支付系统(在我的示例中是hidden_field "card_registration_url")

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
});

如果服务器的响应都很好，则需要调用action payments_controller/create才能完成付款。

我如何调用action _controller/create？

Answer 1

要调用创建操作，您需要一个post方法，并且您已经遵循了rails命名约定，这应该可以帮助您，

/payments post请求将您带到支付控制器中的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
});

如果要通过params发送数据，也可以从它发送数据属性，

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