Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 表格不';t正确执行Post请求功能_Javascript_Ajax_Forms_Post - Fatal编程技术网

Javascript 表格不';t正确执行Post请求功能

Javascript 表格不';t正确执行Post请求功能,javascript,ajax,forms,post,Javascript,Ajax,Forms,Post,由于一些未知的原因,此表单无法按照Send()函数中的设置发出正确的POST请求,无法找出原因,尝试了所有操作 $http.post(url、数据、回调)函数起作用我使用相同的数据通过控制台对其进行了测试,但不知怎的,当调用onsubmit时,什么都没有发生。POST请求未发生,服务器未接收或记录任何内容。 有人能提供一些关于这个谜的见解吗 服务器是带有Express//的节点,让我们假设这就是服务器处理post请求的方式,只是为了测试 app.post('/signin',function

由于一些未知的原因,此表单无法按照Send()函数中的设置发出正确的POST请求,无法找出原因,尝试了所有操作

$http.post(url、数据、回调)函数起作用我使用相同的数据通过控制台对其进行了测试,但不知怎的,当调用onsubmit时,什么都没有发生。POST请求未发生,服务器未接收或记录任何内容。
有人能提供一些关于这个谜的见解吗

服务器是带有Express//的节点,让我们假设这就是服务器处理post请求的方式,只是为了测试

  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">

在AppScope.FormData中:{

使用document.querySelector而不是document.querySelector all-后者返回元素的集合,因此没有值

再想一想,AppScope.FormData将在页面加载时“填充”,因此所有这些值将始终与页面加载时相同,如果用户在输入字段中输入新值,则不会更改


编辑:所以,您编辑了原始代码以使用querySelector…我认为它仍然不起作用

我使用了一个绑定系统,在交互inputElement上设置表单数据。addEventListener('keyup',SetFormData);inputElement.addEventListener('changes',SetFormData);inputElement.addEventListener('click',SetFormData);我只能看你所展示的内容-我答案的第一部分仍然相关-对单个元素使用querySelector,querySelector会返回一个列表,因此你无法获取。值你说它不会发出正确的POST请求,但单击submit会做任何事情吗-比如你能看到Send()吗调用了吗?是的,之前我从函数中调用了它console.log(),但POST请求仍然没有通过,不知道为什么
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));
};