我正在使用Ruby和Sinatra制作一个比较不同类型媒体的小程序。在这种情况下，我要比较电影。我将发布我的代码，然后解释问题。
ERB档案：
<!DOCTYPE html>
<html>
<head>
<title>
Media Comparison
</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//when the document is ready to be manipulated
$(document).ready(function(){
//add a click handler to the button
$("#add_movie").submit(function() {
$.post("/movie", //url
{name: $("#name").val(), releaseDate: $("#release_date").val().toString(), director: $("#director").val(), ratingCritic: $("#ratingc").val(), ratingMPAA: $("#ratingm").val(), genre: $("#genre").val()}, //data
function(data) { //function to call on return
//empty out the select box
$("#movie1").empty();
$.each(data, function( key, val ) {
//refill it
$("#movie1").append("<option value=" + val.name + "> " + val.name + "</option>"
);
});
$("#movie2").empty();
$.each(data, function( key, val ) {
$("#movie2").append("<option value=" + val.name + "> " + val.name + "</option>"
);
});
//clear out the name and email textboxes - possibly arbitrary
$("#name").val("");
$("#release_date").val("");
$("#director").val("");
$("#ratingc").val("");
$("#ratingm").val("");
$("#genre").val("");
}
);
});
});
</script>
</head>
<body>
<FORM METHOD="LINK" ACTION="/">
<input id='backButton' type='submit' value='Go back' />
</FORM>
<h1>Would you like to compare movies...</h1>
<p>
<div id= "movies">
<select id = "movie1">
<% @movie_list.each do |movie| %>
<option value="<%= movie.name %>"><%= movie.name %></option>
<% end %>
</select>
<select id = "movie2">
<% @movie_list.each do |movie| %>
<option value="<%= movie.name %>"><%= movie.name %></option>
<% end %>
</select>
<input id='compare_movies' type='submit' value="Compare these movies!" />
</div>
<div id= "compare">
<script type="text/javascript">
$("#compare").empty();
$(document).ready(function(){
$("#compare_movies").click(function() {
if($("#movie1").val() == $("#movie2").val()){
alert("You can't compare the same two movies!");
}
else{
$("#compare").empty();
$("#compare").append("<table border=\"1\" style=\"width:300px\"><tr><td>" + $("#movie1 option:selected").text() + "</td><td>" + $("#movie2 option:selected").text() + "</td></tr><tr><td>Great</td><td>Movies</td></tr></table>");
}
});
});
</script>
</div>
<h1>...Or add one?</h1>
<form>
Name: <input id='name' type='text' required>
<br/>
Release Date: <input id='release_date' type='date' required>
<br/>
Director: <input id='director' type='text' required>
<br/>
Critical Rating: <input id='ratingc' type='number' step=0.5 min="0" max="5" required>
<br/>
MPAA Rating: <input id='ratingm' type='text' required>
<br/>
Genre: <input id='genre' type='text' required>
<br/>
<input id='add_movie' type='submit' value="Add movie" >
</form>
</body>
</html>
.rb文件：
require 'sinatra'
require 'sequel'
require 'sinatra/json'
DB = Sequel.connect('sqlite://Comparison.db')
DB.create_table? :tvs do
primary_key :id #auto incrementing primary key
String :name #name of the show
Integer :season #number of seasons the show has had
Integer :startYear #The year the show first aired
Boolean :current #whether or not the show is currently running
String :endYear, :default=>"Currently Airing" #The year the show finished. Able to be false if it's current
Float :rating #The show's rating, out of five
end
DB.create_table? :movies do
primary_key :id #auto incrementing primary key
String :name #name of the Movie
String :releaseDate #Date the movie was release
String :director #Director of the
Float :ratingCritic #Does it suck?
String :ratingMPAA #MPAA rating
String :genre #genre of movie
end
DB.create_table? :musics do
primary_key :id #auto incrementing primary key
String :albumTitle #The title of the album
String :releaseDate #The date the album was released
String :artist #Album artist
Boolean :advisory #True if there is a parental advisory
String :genre #Genre of the music
Float :rating #Critical rating
end
DB.create_table? :games do
primary_key :id #auto incrementing primary key
String :name #Name of the game
String :ratingESRB, :size=>1 #Game rating, only one character long
String :releaseDate #Game's release date
String :publisher #Game's publisher
String :platform #Game's platform
Float :ratingCritic #Critical rating
end
require_relative 'Game'
require_relative 'Movie'
require_relative 'Music'
require_relative 'Tv'
def addMovie
Movie.create(:name => "The Lion King", :releaseDate => "1996-10-26", :director => "John Lasseter", :ratingCritic => 4.5, :ratingMPAA => "PG", :genre => "Family")
Movie.insert(:name => "Cats and Dogs", :releaseDate => "2000-4-16", :director => "Mr. Director", :ratingCritic => 2.3, :ratingMPAA => "PG", :genre => "Family")
end
def print_movies
#get all the students and print them (each row comes back as a hash)
Movie.all.each do |movie|
#print
puts "Name: #{movie[:name]}
Release Date: #{movie[:releaseDate]}
Director: #{movie[:director]}
Critical Rating: #{movie[:ratingCritic]}
MPAA Rating: #{movie[:ratingMPAA]}
Genre: #{movie[:genre]}\n\n"
end
end
def delete_media_db
DB[:movies].delete
DB[:games].delete
DB[:tvs].delete
DB[:musics].delete
end
get '/' do
erb :welcome
end
get '/movie' do
@movie_list = Movie.all
erb :movie
end
post '/movie' do
Movie.create(:name => params[:name],
:releaseDate => params[:releaseDate],
:director => params[:director],
:ratingCritic => params[:ratingCritic],
:ratingMPAA => params[:ratingMPAA],
:genre => params[:genre])
movies = Movie.all.map do |movie|
{:name => movie.name, :releaseDate => movie.releaseDate, :director => movie.director, :ratingCritic => movie.ratingCritic, :ratingMPAA => movie.ratingMPAA, :genre => movie.genre}
end
#turn the array of hashes into json
return json movies
end
我的问题来自ERB文件底部的表单。这允许用户将电影添加到他们想要比较的数据库中。最初，没有表单标签，数据将通过在这些行中按ID引用输入字段传递到数据库：
name: $("#name").val(), releaseDate: $("#release_date").val().toString(), director: $("#director").val(), ratingCritic: $("#ratingc").val(), ratingMPAA: $("#ratingm").val(), genre: $("#genre").val()},
但是，我想进行简单的数据验证，确保输入字段中有某些内容，因此我创建了所需的字段并将它们放在表单中。但是，现在他们已经处于某种形式，我将click更改为submit，我似乎不再进入submit了。我无法执行click，因为它会处理POST，无论值是否有效，因为它等待点击，而不是提交。
答案 0 :(得分：1)
首先，除非你想提交，否则你可能在大多数时候都不需要来自
如果你有一个表单，而你只需要在客户端处理它的数据而不提交它，你只需使用普通按钮而不是提交按钮
如果要在客户端处理数据然后提交from，请在提交按钮处理程序中调用e.preventDefault // where e is the event object
处理完数据后，使用submit()函数
从你的代码中，一个例子就像是
<input id='compare_movies' type='submit' value="Compare these movies!" />
$("#compare_movies").click(function(e) {
e.preventDefault();
if($("#movie1").val() == $("#movie2").val()){
alert("You can't compare the same two movies!");
}
else{
$("#compare").empty();
$("#compare").append("<table border=\"1\" style=\"width:300px\"><tr><td>" + $("#movie1 option:selected").text() + "</td><td>" + $("#movie2 option:selected").text() + "</td></tr><tr><td>Great</td><td>Movies</td></tr></table>");
}
$('selector').submit() // do this if you want to submit the form. selector can be an id, class etc of the form
});
旁注：你的代码对我来说很陌生：）