如何在单击按钮时在同一页面上显示数据[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]

回答

相关问题