Question

我最初尝试使用$ .ajax做到这一点，但没有成功。 .load对我好，所以我用它。但是，现在我发现自己需要一些带有$ .ajax的回调函数。

 jQuery ->
   fl = $("#flight_flightlesson_id")
     fl.on "change", ->
       $("#gradable_items_container").load("gradable_items_inputs?lesson=#{fl.val()} #ajax_gradable_items_for_lesson_content")

当所选课程输入发生变化时，会将lesson_id作为url参数传递给flights_controller动作gradable_items_inputs，填充相同名称的模板，并将该内容加载到浏览器中而不重新加载。效果很好。

但是，我想使用这些回调

  beforeSend: ->
    $("#ajax_tell").addClass "is-fetching"

    //success: (response) ->
    //  $("#gradable_items_container").html(response)

    complete: (response) ->
      $("#ajax_tell").removeClass "is-fetching"
      alert "complete"

    error: ->
      $("#{ajax_tell}").html "<p>ERROR</p>"
      alert "error"

如何将现有的.load转换为此$ .ajax？

Answer 1

$.load()只是$.ajax()的便捷方法包装器，其中一些选项设置为dataType:'html'，并且在ajax成功时使用html()方法自动填充选择器和响应

$.post(), $.get(), $.getJSON()等

也是如此

关注$.ajax() api并使用您需要的任何选项，以更灵活地做同样的事情。

唯一的超关键选项是url以及使用html()匹配load()方法的成功或完成或完整回调。 API概述了其他选项的默认值（如果有的话）并且有很多例子

Answer 2

这似乎是一个很好的转换

  fl = $("#flight_flightlesson_id")
  fl.on "change", ->
    $.ajax
      url: "gradable_items_inputs?lesson=#{fl.val()}"

    beforeSend: ->
      $("#ajax_tell").addClass "is-fetching"

    complete: ->

    success: (data) ->
      // $("#gradable_items_container").empty().append $(data).find("#ajax_gradable_items_for_lesson_content")
      $("#gradable_items_container").html(data).find("#ajax_gradable_items_for_lesson_‌content")
      $("#ajax_tell").removeClass "is-fetching"

    error: ->
      $("#{ajax_tell}").html "<p>ERROR</p>"

将jQuery .load转换为$ .ajax调用

2 个答案: