为什么我的 jquery ajax POST 函数将我的表单数据发送到我的基本 url 而不是我指定的 url？答案

【问题标题】：Why is my jquery ajax POST function sending my form data to my base url rather than to the url I specified?为什么我的 jquery ajax POST 函数将我的表单数据发送到我的基本 url 而不是我指定的 url？
【发布时间】：2016-08-24 04:43:49
【问题描述】：

我有一个表单，我想将数据 POST 到我的后端。提交表单时，我已成功防止自己被重定向。我希望 POST 请求转到 MYBASEURL/form。

下面的代码几乎可以工作，但是 Ajax 调用似乎忽略了我指定的 URL，并向 MYBASEURL 发出 POST 请求。

我正在使用什么：

jquery-1.12.3.min.js

Node.js v4.3.2

Express 4.x

bodyparser

<form name="myform" action="#" method="POST">
  Username: <input type="text" id="user" name="username"/><br/>
  Password: <input type="text" id="email" name="email"/>
  <input type="submit" id="submitForm" value="submit"/>
</form>

<script type="text/javascript">
  var user=$('#user').val(), email=$('#email').val();
  $('#submitForm').bind('click', function() {
    $.ajax({
      url: "/form",
      type: 'POST',
      contentType: 'text/json',
      data: JSON.stringify({name:user, email:email}),
      complete: function() { /* Do something with the response. */ }
    });
    return false; // Prevent form submit.
  });
</script>

将相对 url 更改为绝对 url 不会改变任何事情。从操作中删除“#”不会改变任何事情。

如何确保此 POST 发送到 MYBASEURL/form/ 而不仅仅是 MYBASEURL/？

【问题讨论】：

尝试使用完整的 url .. 可以为 javascript 声明一个全局 ajax_base_url 并在此处使用它，如 url : ajax_base_url +'/form'
将相对 URL 更改为绝对 URL 并不能解决或改变我的问题，谢谢。

标签： jquery ajax node.js forms post

【解决方案1】：

我认为您的问题不在此代码中。在解决了您发布的代码中的错误（设置“用户”变量但提交“用户名”和 $('#submitForm').bind 而不是 $('#submitForm').bind）后，它工作正常。我想知道您是否通过 .htaccess 或其他方式进行了某种路由。

【讨论】：

如果您想详细说明 .htaccess，那就太好了。跟后台有关系吗？如果这很重要，我的后端在 Node.js/express 中。我假设这是一个前端问题，因为我能够在不同的路线上接收 GET 和 POST 等。
在重新阅读您所说的内容后删除了我的第一条评论。好的，所以在修复这些编码错误之后，你说这是一个后端问题。谢谢！

【解决方案2】：

添加我自己的答案，因为我的前端和后端都有问题：

首先变量没有在正确的范围内初始化，我的脚本应该是这样的：

<script type="text/javascript">
  $('#submitForm').bind('click', function() {
    var user=$('#user').val(), email=$('#email').val();
    $.ajax({
      url: "/api/users",
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({name: user, email: email}),
      complete: function() { 
        // Do something with the response.
      }
    });

    return false; // Prevent form submit.
  });
</script>

这允许我的$.ajax POST 正确发送到正确的路径：MYBASEURL/form

我的第二个问题是我必须将后端设置为正确解析与此 ajax 调用中指定的类型匹配的内容类型。

【讨论】：