如何在單擊按鈕時在同一頁面上顯示數據[Sinatra/Ruby]

我正在練習在Sinatra中製作一個Web應用程序，我正在嘗試更新一個頁面，以便從一個數據庫中獲取信息後會顯示一次按鈕被點擊（更具體地說，我是一個使用學生數據庫的學生年齡，姓名和校園位置）。我有一個5個按鈕（每個校園一個）的路線，一旦校園按鈕被點擊，我希望網頁更新所有學生的信息（來自該校園）在同一頁面上。如何在單擊按鈕時在同一頁面上顯示數據[Sinatra/Ruby]

這就是我對app.rb

require 'sinatra' 
require 'sqlite3' 
set :public_folder, File.dirname(__FILE__) + '/static' 
db = SQLite3::Database.new("students.db") 
db.results_as_hash = true 

get '/' do 
    @students = db.execute("SELECT * FROM students") 
    erb :home 
end 

get '/students/new' do 
    erb :new_student 
end 

get '/students/campus' do 
    erb :campus 
end 

get '/students/campus/:campus' do 
    erb :campus 
    campus_data = db.execute("SELECT * FROM students WHERE campus=?", params[:campus]) 
    campus_data.to_s 
    response = "" 
    campus_data.each do |student| 
    response << "ID: #{student['id']}<br>" 
    response << "Name: #{student['name']}<br>" 
    response << "Age: #{student['age']}<br>" 
    response << "Campus: #{student['campus']}<br><br>" 
    end 
    response 
end 

post '/students' do 
    db.execute("INSERT INTO students (name, campus, age) VALUES (?,?,?)", [params['name'], params['campus'], params['age'].to_i]) 
    redirect '/' 
end

這就是我對campus.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>Campus Cohorts</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>Cohorts</h1> 
<p>Click on a button to see all students from that location.</p> 

    <a href="/students/campus/SF"><button type="button">San Francisco</button></a> 
    <a href="/students/campus/NYC"><button type="button">New York City</button></a> 
    <a href="/students/campus/SD"><button type="button">San Diego</button></a> 
    <a href="/students/campus/CHI"><button type="button">Chicago</button></a> 
    <a href="/students/campus/SEA"><button type="button">Seattle</button></a> 


</body> 
</html>

目前，如果一個按鈕被按下它會重定向你到一個新的頁面，那個校園的學生信息表格，我怎樣才能在同一頁面上呈現信息？

來源

2017-04-14 CarlosG90

這聽起來像你想要做一個AJAX調用。你將不得不編寫一些JavaScript來從你的服務器獲取學生視圖並將其插入當前頁面。

使用JavaScript庫如jQuery：http://api.jquery.com/jquery.ajax/

的想法是，你會在你的校園按鈕的click綁定事件和消防一個AJAX調用由校園按鈕的href給出的URL。服務器將回應該校園的渲染視圖並將其返回到您的JavaScript函數。然後你可以將它插入到頁面中。

例如：

您一個類添加到您的按鈕（可以輕鬆地用jQuery選擇它們）：

<a class="campus" href="/students/campus/SF"><button type="button">San Francisco</button></a>

現在編寫的JavaScript。您將不得不創建一個JavaScript文件並將其包含到您的應用程序佈局中。 Sinatra提供靜態資產，例如您應用的./public目錄中的css和javascript文件。然後，在您的應用佈局HTML文件的底部寫入<script src="you_file.js"></script>。您也將有download the jQuery file做同樣的只是確保jQuery的文件包含在你的應用程序佈局上面自己的javascript文件即

內部的JavaScript文件，你可以定義你的jQuery函數來實現AJAX調用。

單擊處理和AJAX調用：

# When the document receives a click on a '.campus' element run this function 
$(document).on('click', '.campus', function(){ 
    var path = this.href; # grab the route 

    # jQuery provides this convenient AJAX method that will fetch the HTML 
    # returned by calling the server at the path URL and insert it into 'body' 
    $('body').load(path) 
});

這就是它。 jQuery load函數將向點擊校園鏈接的路徑發起AJAX請求。服務器將通過get '/students/campus/:campus' do路由接收請求，並以渲染結果進行響應。然後，jQuery將用結果替換body標籤的內容。

聲明：您可能需要將此示例應用到您的用例中，但這應該指向正確的方向。通過這個答案涉及的某些科目有：

加載靜態資產在西納特拉應用程序（http://www.sinatrarb.com/intro#Static%20Files）
事件處理程序的jQuery（https://learn.jquery.com/events/handling-events/）
AJAX jQuery中（http://api.jquery.com/load/）
更換元素的innerHTML調用（How to replace innerHTML of a div using jQuery?）

快樂編碼！

來源

2017-04-14 20:34:42 DiegoSalazar

如何在單擊按鈕時在同一頁面上顯示數據[Sinatra/Ruby]

回答

相關問題