Javascript 如何使用Backbone.js捕获表单提交
当我在输入字段中输入数据后测试并单击我的Javascript 如何使用Backbone.js捕获表单提交,javascript,backbone.js,javascript-events,Javascript,Backbone.js,Javascript Events,当我在输入字段中输入数据后测试并单击我的apply按钮时，我得到一个文件未找到错误 Login按钮是一个虚拟按钮，没有任何功能。我只想在单击“应用”后显示一个警告框，上面写着“您以（此处的用户名）身份成功登录！！！” var Credentials = Backbone.Model.extend({}); var LoginView = Backbone.View.extend({ el: $("#login-form"), events: { "click #login":
applyLoginvar Credentials = Backbone.Model.extend({});
var LoginView = Backbone.View.extend({
el: $("#login-form"),
events: {
"click #login": "login"
},
initialize: function(){
var self = this;
this.firstname = $("#username");
this.lastname = $("#lastname");
this.number = $("#number");
this.username = $("#username");
this.password = $("#password");
this.firstname.change(function(e){
self.model.set({firstname: $(e.currentTarget).val()});
});
this.lastname.change(function(e){
self.model.set({lastname: $(e.currentTarget).val()});
});
this.number.change(function(e){
self.model.set({number: $(e.currentTarget).val()});
});
this.username.change(function(e){
self.model.set({username: $(e.currentTarget).val()});
});
this.password.change(function(e){
self.model.set({password: $(e.currentTarget).val()});
});
},
login: function(){
var firstn= this.model.get('firstname');
var lastn= this.model.get('lastname');
var numb= this.model.get('number');
var user= this.model.get('username');
var pword = this.model.get('password');
alert("You logged in as " + user + "Succesfully!!!");
return false;
}
});
window.LoginView = new LoginView({model: new Credentials()});
});
您的注册表格：
名字
姓
电话号码。
用户名
密码
申请
登录
由于表单已提交且操作为
“/login”getloginget文件未找到.preventDefault（）submitevents: {
"submit": "onSubmit",
},
onSubmit: function(e) {
// `e` being a standard DOM event
e.preventDefault();
}
var LoginView = Backbone.View.extend({
// Put the string into a template to ease the manipulation later on.
template: _.template("You logged in as <%= username %> and a password of <%= password %>\nFirstName:<%= firstname %>\nLastName:<%= lastname %>\nNumber:<%= number %>"),
el: $("#login-form"),
events: {
// listen for the submit event of the form
"submit": "onSubmit",
// listen to events from here
"change #username": 'onUsernameChange'
},
initialize: function() {
// it's a good idea to cache jQuery objects like this.
this.firstname = $("#username");
this.lastname = $("#lastname");
this.number = $("#number");
this.username = $("#username");
this.password = $("#password");
// but avoid extensive `change` listeners as it's inefficient and
// useless in this case. If you want to listen to changes, do it
// in the events hash, like the "onUsernameChange" example.
},
onSubmit: function(e) {
// prevent the submit and do what you want instead
e.preventDefault();
// Set directly with an object, it's quick and clean.
this.model.set({
firstname: this.firstname.val(),
lastname: this.lastname.val(),
number: this.number.val(),
username: this.username.val(),
password: this.password.val()
});
// use the template for the alert.
alert(this.template(this.model.toJSON()));
},
onUsernameChange: function(e) {
// no need for jQuery for a trivial value retrieval
console.log(e.currentTarget.value);
}
});
<html>
<head>
<!-- head stuff like CSS, title, etc. -->
</head>
<body>
<form id="login-form">
<!-- rest of the form goes here -->
</form>
<!-- Load the scripts here -->
<script src="libs/jquery/dist/jquery.js"></script>
<script src="libs/underscore/underscore.js"></script>
<script src="libs/backbone/backbone.js"></script>
<!-- then your own code can go here, or into another js file. -->
<script>
// your view, etc.
</script>
</body>
</html>
//你的观点等等。
由于表单已提交且操作为
“/login”getloginget文件未找到.preventDefault（）submitevents: {
"submit": "onSubmit",
},
onSubmit: function(e) {
// `e` being a standard DOM event
e.preventDefault();
}
var LoginView = Backbone.View.extend({
// Put the string into a template to ease the manipulation later on.
template: _.template("You logged in as <%= username %> and a password of <%= password %>\nFirstName:<%= firstname %>\nLastName:<%= lastname %>\nNumber:<%= number %>"),
el: $("#login-form"),
events: {
// listen for the submit event of the form
"submit": "onSubmit",
// listen to events from here
"change #username": 'onUsernameChange'
},
initialize: function() {
// it's a good idea to cache jQuery objects like this.
this.firstname = $("#username");
this.lastname = $("#lastname");
this.number = $("#number");
this.username = $("#username");
this.password = $("#password");
// but avoid extensive `change` listeners as it's inefficient and
// useless in this case. If you want to listen to changes, do it
// in the events hash, like the "onUsernameChange" example.
},
onSubmit: function(e) {
// prevent the submit and do what you want instead
e.preventDefault();
// Set directly with an object, it's quick and clean.
this.model.set({
firstname: this.firstname.val(),
lastname: this.lastname.val(),
number: this.number.val(),
username: this.username.val(),
password: this.password.val()
});
// use the template for the alert.
alert(this.template(this.model.toJSON()));
},
onUsernameChange: function(e) {
// no need for jQuery for a trivial value retrieval
console.log(e.currentTarget.value);
}
});
<html>
<head>
<!-- head stuff like CSS, title, etc. -->
</head>
<body>
<form id="login-form">
<!-- rest of the form goes here -->
</form>
<!-- Load the scripts here -->
<script src="libs/jquery/dist/jquery.js"></script>
<script src="libs/underscore/underscore.js"></script>
<script src="libs/backbone/backbone.js"></script>
<!-- then your own code can go here, or into another js file. -->
<script>
// your view, etc.
</script>
</body>
</html>
//你的观点等等。
#登录表单#登录表单操作为“/login”操作