Rails學習簡單的ajax/jquery

嘿傢伙後端人在這裏搞一些前端的東西。Rails學習簡單的ajax/jquery

所以對於現在我有這三個文件：

一個新的觀點：

<div id= "savings-list"> 
    <%= render "savings/list", locals: { savings: @savings } %> 
</div > 

<div> 
    <a href= "" id= "new-random-savings-btn" > Random </a> 
</div>

部分：

JS AJAX JSON：

$(document).ready(function(){ 
    var newSavingsBtn = $("#new-random-savings-btn"); 

    var updateSavings = function(newSavings){ 
    console.log(newSavings); 
    } 

    var appendSavings = function(event) { 
    event.preventDefault(); 

    var request = $.ajax({ 
     dataType: "json", 
     type: "GET", 
     url: "/savings/random", 
     data: "" 
    }) 

    request.done(updateSavings); 
    } 

    newSavingsBtn.on("click", appendSavings); 
})

簡單控制器返回一些臨時json數據：

class SavingsController < ApplicationController 

    def new 
    end 

    def random 
    @savings = random_savings.to_json 

    render json: @savings 
    end 

    private 

    def random_savings 
    temp_data.shuffle.take(2) 
    end 

    def temp_data 
    [ 
     { name: "coffee", price: "2.99" }, 
     { name: "tacos", price: "1.99" }, 
     { name: "smoking", price: "5.99" }, 
     { name: "1000 tv channels", price: "120.99" }, 
    ] 
    end 
end

目標是更新視圖頁面上的元素。然而，href似乎只是刷新頁面。 json被調用，但刷新似乎發生？什麼是最好的方式來做到這一點，並使其工作？

來源

2016-02-25 ChrisCPO

所以Ajax是執行你怎麼想，你只是想停止從頁面令人耳目一新？ – MilesStanfield

該方法是'preventDefault'而不是'PreventDefault' – Mike

另外，什麼是'data：{data}'？你沒有在我看到的任何地方定義'data' var，你是不是在使用es2015標準？ – Mike

如果你不想頁面刷新，你需要改變這種

event.PreventDefault();

這個

event.preventDefault();

來源

2016-02-25 21:27:30 MilesStanfield

啊謝謝你的錯字！ – ChrisCPO

Rails學習簡單的ajax/jquery

回答

相關問題