javascript Ajax较低级别与较高级别（HTML响应）

Posted 2021-05-03

# HTML response
#lower level: Ajax

$(function(){
  $("a.load_comments").on("click", function(e){
    
    $.ajax({
      method: "GET",
      url: this.href
    }).success(function(response){
    $("div.comments").html(response)
    }).error(function(notNeeded){
      alert("we broke!")
    });
    
    e.preventDefault();
  })
})
---------------------
#HTML response
#higher level: JQuery

$(function(){
  $("a.load_comments").on("click", function(e){
    
    $.get(this.href).success(function(response){
      $("div.comments").html(response)
    })
    
    e.preventDefault();
  })
})
----------------------
#JSON repsonse
#higher level: Jquery 

$(function(){
  $("a.load_comments").on("click", function(e){
    
    $.get(this.href).success(function(json){
      $("div.comments ol").html("")
      json.forEach(function(comment){
        $("div.comments ol").append("<li>"+comment.content+"</li>")  
      })
    })
    
    
    e.preventDefault();
  })
})

#simulate the JSON answer in comments_controller :
class CommentsController < ApplicationController
  before_action :set_post
  
  def index
    @comments = @post.comments
    render :json => @comments
  end