Twilio sms 在 Rails 中发送错误的 AJAX 成功功能

Question

我正在制作一个 Rails 应用程序。我的视图向我的服务器发送了一个 Ajax POST 请求以及一个电话号码。我在控制器中使用该电话号码来调用使用 Twilio API 向该号码发送短信的模型方法。

问题是即使Twilio API发送成功，在我看来AJAX成功函数并没有运行。是什么导致了问题？

这里是视图：

<% content_for(:after_js) do %>
  <%= javascript_tag do %>
    $(document).ready(function() {
      $('form').submit(function() {
      var phoneNumber = $(this).serialize();
      var submit = $(this).find(":submit");
      submit.attr("disabled", true);
      $.ajax({
          type: "POST",
          url: $(this).attr('action'), //sumbits it to the given url of the form
          data: phoneNumber,
          dataType: "JSON"
      }).success(function(json){
          console.log("success", json);
          submit.css("background-color", "green");
          submit.val("success");
      });
      return false; // prevents normal behaviour
      });
    });
  <% end %>
<% end %>


<%= form_tag(invite_with_twilio_reservation_path(@reservation, token: @reservation.token), method: "post") do %>
  <%= label_tag(:number, "Send to:") %>
  <%= text_field_tag(:number) %>
  <%= submit_tag("send")%>
<% end %>

这里是控制器：

  def invite_with_twilio
    @reservation = Reservation.find(params[:id])
    if params[:token] == @reservation.token
      authorize @reservation
    else
      raise
    end

    number = params[:number]
    status = @reservation.send_sms_invitation_to_number(number, current_user)

    if status == true
      render json: number, status: :ok
    else
      render json: number, status: :fail
    end
  end

这是模型：

  def send_sms_invitation_to_number(number, user)
    club_name = tables.first.club.name
    account_sid = ENV['TWILIO_API_ACCOUNT_SID']
    auth_token = ENV['TWILIO_API_AUTH_TOKEN']

    Twilio.configure do |config|
      config.account_sid = account_sid
      config.auth_token = auth_token
    end

    @client = Twilio::REST::Client.new

    if @client.messages.create(
      from: "+13238005977" ,
      to: "#{number}",
      body: "Hey! Your buddy #{user.full_name}, wants to invite you to a reservation in #{club_name}, on the
      #{date}. Follow this link to accept his invitation and coordinate with your friends. #{Rails.application.routes.url_helpers.reservation_url(self, token: self.token, host: 'localhost')}.")
      return true
    else
      return false
    end
  end

再次，短信发送成功。问题是没有调用 AJAX 成功函数，并且按钮既不改变文本也不改变颜色。

Answer 1

尝试这样做：

$.ajax({
  type: "POST",
  url: $(this).attr('action'),
  data: phoneNumber,
  dataType: "JSON",
  success: function(json){
     // SMS success
  },
  error: function(json) {
    // SMS not sent
  }
});

希望对你有帮助！

Answer 2

这里是 Twilio 开发者宣传员。

您的问题似乎出在您的$.ajax 函数中。朱利安提出了一种解决方法，但我想我只是去解决问题所在以提供帮助。你的代码是：

  $.ajax({
      type: "POST",
      url: $(this).attr('action'), //sumbits it to the given url of the form
      data: phoneNumber,
      dataType: "JSON"
  }).success(function(json){
      console.log("success", json);
      submit.css("background-color", "green");
      submit.val("success");
  });

所以你在调用$.ajax 的结果上调用了success。根据 jQuery 文档，$.ajax 返回一个 jqXHR 类型的对象。此对象用于响应 success、error 和 complete，但它们已被弃用并作为 jQuery 3 的一部分被删除。

相反，您可以按照 Julien 的建议在传递给 $.ajax 的选项对象中使用 success 键。或者您可以使用 success 的替换，即 done。

  $.ajax({
      type: "POST",
      url: $(this).attr('action'), //sumbits it to the given url of the form
      data: phoneNumber,
      dataType: "JSON"
  }).done(function(json){
      console.log("success", json);
      submit.css("background-color", "green");
      submit.val("success");
  });

不要忘记同时实现fail，以便处理故障。