我正在尝试创建登录页面，但我坚持将数据作为JSON发送到Cherrypy。尝试覆盖提交按钮，因为 AJAX 在我按下按钮时不会发送任何数据。
删除旧代码
@EDIT 我已经更改了代码，现在我没有向服务器发送任何数据(我假设按下按钮后控制台中没有任何内容(
我的.js
$("#myForm").click(function(){
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
$.ajax({
type: 'POST',
url: 'http://localhost:8080/login',
data: JSON.stringify(dataString),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
});
我的.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form id="myForm" class="login-form">
<input type="text" name="login" id="login" placeholder="login"/>
<input type="password" name="password" id="password" placeholder="password"/>
<button form="myForm" type="submit">Login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>
登录页面(数据未加密？
图片
- 链接中的密码？
我的控制台(空的？
图片
- 无登录调用
我在这里做错了什么？
你想做一个帖子请求(你也必须在服务器端处理帖子(：
type: 'POST',
也把它放在你的提交函数中：
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
所以代码变成：
<form id="myForm" class="login-form">
<input type="text" id="login" placeholder="login"/>
<input type="password" id="password" placeholder="password"/>
<button class="button_submit">login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
$("#myForm").submit(function(){
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
$.ajax({
type: 'POST',
url: 'http://localhost:8080/login',
data: JSON.stringify(dataString),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
});
在这种情况下，最好发送一个 POST 请求，因为它是一个更"隐藏"的请求，然后只是使用 GET 抛出参数(POST 在"后台"发送数据(。另请注意，如果要正确处理表单提交并且使用的是jQuery，请使用submit事件处理程序。
$("#myForm").submit(function(){
// do stuff
});
将
event.preventDefault()移到顶部。在您的情况下，按钮正在执行它的正常行为，这是submitting，需要防止执行到 ajax。
$('#button_submit').click(function(event) {
event.preventDefault();
$.ajax({
//rest of the code
});
});
您引用按钮使用错误，请参阅文档
改变：
<button class="button_submit">login</button>
自
<button id="button_submit">login</button>
将 name 属性添加到输入字段而不是 id(如果您愿意，也可以同时使用两者(，并将 GET 切换到 POST 以隐藏数据：
<input type="text" id="login" name="login" placeholder="login"/>
<input type="password" id="password" name="password" placeholder="password"/>
然后将 jQuery 修复为：
$('#button_submit').on("click",function(e) {
e.preventDefault();
....