表单没有'不能正确执行请求后功能
Form doesn't excecute Post Request Function properly
由于某些未知原因,此表单无法按照Send((函数中的设置发出正确的POST请求,无法找出原因,尝试了所有方法。
$http.post(url,data,callback);
函数可以工作,我通过控制台用相同的数据测试了它,但不知何故,当它被调用onsubmit时,什么都没有发生。POST请求不会发生,服务器也不会接收或记录任何内容。有人能对这个谜团提供一些见解吗?
服务器是Express的节点//我们只说这是服务器处理后请求的方式,只是为了测试
app.post('/signin',function (req,res) {
res.send('It works!');
console.log(req.body);
});
app.post('/signup',function (req,res) {
res.send('It works!');
console.log(req.body);
});
这是HTML表单
<div class="auth-form">
<label class="auth-form-tab">Sign In</label>
<label class="auth-form-tab">Sign Up</label>
<form onsubmit="Send();return false;">
<input type="text" name="username" placeholder="Username">
<input type="text" name="firstname" placeholder="First Name">
<input type="text" name="lastname" placeholder="Last Name">
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="submit">
</form>
<div class="status"></div>
</div>
<script src="/js/auth.js">
这里是JS,忽略AppScope.ActiveTab
的事情它不应该影响任何
function Send() {
if (AppScope.ActiveTab == 'SignIn') {
$http.post('/signin', AppScope.FormData, function (data) {
console.log(data);
document.querySelector('.status').innerHTML = data;
});
} else {
$http.post('/signup', AppScope.FormData, function (data) {
console.log(data);
document.querySelector('.status').innerHTML = data;
});
}
}
var AppScope = {
ActiveTab: 'SignIn',
Status: '',
FormData: {
username: document.querySelector('input[name=username]').value,
firstname: document.querySelector('input[name=firstname]').value,
lastname: document.querySelector('input[name=lastname]').value,
email: document.querySelector('input[name=email]').value,
password: document.querySelector('input[name=password]').value
}
};
var $http = {};
$http.serialiseObject = function (obj) {
var pairs = [];
for (var prop in obj) {
if (!obj.hasOwnProperty(prop)) continue;
if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
if (obj[prop] !== null) {
pairs.push($http.serialiseObject(obj[prop]));
continue;
}
}
if (obj[prop] !== null) pairs.push(prop + '=' + obj[prop]);
}
return pairs.join('&');
};
$http.post = function (url, data, callback) {
if (url == undefined) return Error('URL undefined');
if (data == undefined) return Error('can''t send nothing');
var Req = new XMLHttpRequest();
Req.open('POST', url, true);
Req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
Req.onreadystatechange = function () {
if (Req.readyState == 4 && Req.status == 200) {
var response = 'response' in Req ? Req.response : Req.responseText;
if (callback) {
callback(response);
} else {
Error('No Callback Found');
}
}
};
Req.send($http.serialiseObject(data));
};
使用document.querySelector而不是document.querySelectedAll-后者返回元素的集合,因此没有值
仔细想想,AppScope.FormData将在页面加载时"填充",因此所有这些值将始终与页面加载时相同,如果用户在输入字段中输入新值,则不会更改
edit:所以,您编辑了原始代码以使用querySelector。。。我认为它仍然不起作用
相关文章:
- 防止双击执行两次jQuery post请求
- 暂停函数执行流程,直到ajax请求完成
- Chrome浏览器“;挂起”;同时在循环中执行AJAX请求
- 如何仅在完成对gap.client.youtube的请求.execute后执行函数
- AJAX 请求不会在 400 个错误查询上执行失败
- 嵌套在 .get 请求中的 jQuery 不会执行
- 通过 ajax 请求执行 ajax 请求
- 如何在执行 Ajax 请求大量数据库更新时实现进度条
- 从 Web Worker 执行 AJAX 请求是否可行
- 在不执行ajax请求的情况下,使用jQuery读取HTTP标头以检查404
- Angular在不触发摘要的情况下执行XHR请求
- 按顺序执行ajax请求的动态编号
- 根据条件线性执行请求
- Firefox SDK 多次执行请求
- 如何将 Google 地方自动完成功能配置为仅在输入字段中至少有 n 个字母时执行请求
- 执行请求数组失败,并多次调用Error: done().映射请求数组不会触发请求
- HTTP403: FORBIDDEN——服务器理解请求,但拒绝执行请求
- 使用AngularJS'执行请求的顺序;s ng资源
- 按顺序在循环中执行请求
- 表单没有'不能正确执行请求后功能