我正在练习在Sinatra中制作一个网络应用程序，我正在尝试更新一个页面，以便在单击按钮后显示数据库中的信息(更具体地说，我是一个使用学生数据库的学生年龄，姓名和校园位置)。我有一条带有 5 个按钮(每个校区一个)的路线，单击校园按钮后，我希望页面在同一页面上更新所有学生信息(来自该校园)。
这就是我对应用程序.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
这就是我对校园的评价。
<!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>
目前，如果单击一个按钮，它将重定向到带有该校园学生信息的新页面，我如何在同一页面上呈现信息？
听起来你想做一个AJAX调用。您必须编写一些javascript来从服务器获取学生视图并将其插入当前页面。
使用像jQuery这样的javascript库：http://api.jquery.com/jquery.ajax/
这个想法是，您将在校园按钮上绑定一个click事件，并对校园按钮的 href 给出的 URL 触发 AJAX 调用。服务器将使用该园区的呈现视图进行响应，并将其返回到您的 javascript 函数。然后，您可以将其插入到页面中。
例如：
您可以向按钮添加一个类(以使用 jQuery 轻松选择它们)：
<a class="campus" href="/students/campus/SF"><button type="button">San Francisco</button></a>
现在你写javascript。您必须创建一个 javascript 文件并将其包含在您的应用程序布局中。Sinatra提供静态资产，如css和javascript文件，来自应用程序的./public目录。然后，在应用布局 html 文件的底部写入<script src="you_file.js"></script>。您还必须下载jQuery文件并执行相同的操作，只需确保jQuery文件包含在您自己的javascript文件上方的应用程序布局中，即
<script src="the-downloaded-jquery-file.js">
<script src="you-file.js">
在该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)
});
仅此而已。jQueryload函数将向单击的校园链接的路径触发 AJAX 请求。服务器将在get '/students/campus/:campus' do路由接收请求，并使用呈现的结果进行响应。然后，jQuery会将body标记的内容替换为结果。
免责声明：您可能必须将此示例适合您的用例，但这应该为您指明正确的方向。本答案涵盖的一些主题是：
- 在 Sinatra 应用程序中加载静态资产 (http://www.sinatrarb.com/intro#Static%20Files)
- jQuery 中的事件处理程序 (https://learn.jquery.com/events/handling-events/)
- jQuery 中的 AJAX 调用 (http://api.jquery.com/load/)
- 替换元素 innerHTML (如何使用 jQuery 替换div 的 innerHTML？)
祝您编码愉快！