Question

我正在Sinatra练习制作一个网络应用程序而我正在尝试更新页面，以便在点击按钮时显示来自数据库的信息（更具体地说，我是使用学生数据库与学生的年龄，姓名和校园位置）。我有一个带有5个按钮的路线（每个校园一个），点击校园按钮后，我希望页面在同一页面上更新所有学生信息（来自该校园）。

这就是我对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>

目前，如果单击一个按钮，它会将您重定向到一个新页面，其中包含校园的学生信息表，我如何在同一页面上呈现信息？

Answer 1

听起来你想要做一个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提供来自应用程序的./public目录的静态资产，如css和javascript文件。然后，在应用布局html文件的底部写下<script src="you_file.js"></script>。您还需要download the jQuery file并执行相同操作，只需确保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)
});

关于它。 jQuery load函数将向点击的校园链接路径发出AJAX请求。服务器将在get '/students/campus/:campus' do路由接收请求，并以呈现的结果进行响应。然后，jQuery将用结果替换body标记的内容。

免责声明：您可能必须将此示例与您的用例相符，但这应该指向正确的方向。这个答案涉及的一些主题是：

在Sinatra应用中加载静态资源（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?）

快乐的编码！

单击按钮后如何在同一页面上显示数据[Sinatra / Ruby]

1 个答案: