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

Convert a jQuery .load to $.ajax call

本文关键字:ajax 调用 转换 jQuery load      更新时间:2023-09-26

我最初尝试使用 $.ajax 执行此操作,但没有成功。 .load 对我很好,所以我用了它。 但是,现在我发现自己需要一些带有 $.ajax 的 callBacks。

 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?

>$.load()只是一个方便的方法包装器$.ajax(),其中设置了一些选项,如dataType:'html',以及在Ajax成功时使用html()方法自动填充选择器。

$.post(), $.get(), $.getJSON()等也是如此

按照 $.ajax() API 进行操作,并使用您需要的任何选项来更灵活地执行相同的操作。

唯一的超关键选项是url和成功或完成或完成或完成回调,您可以使用html()来匹配load()方法。API 概述了其他选项的默认值(如果有),并且到处都有很多示例

似乎是一个很好的转换

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