Question

我尝试通过表单和提交按钮向API发出以下POST请求。

编辑：我很抱歉，这不是我早上的事。这就是POST请求的样子：

$.ajax({
  type: "POST",
  url: "/api/v1/users/",
  data:{
    user: {
      fname: "Test",
      lname: "Johnson",
      password: "passw0rd",
      email: "test2@johnson.com"
    }
  }
})

这是我的HTML：

<div class="row">
        <div class="three columns">
          <label for="emailInput">email</label>
          <input type="text" id="emailInput">
        </div>
          <div class="three columns">
          <label for="passwordInput">password</label>
          <input type="text" id="passwordInput">
          </div>
        </div>
        <div class="row">
          <div class="four columns">
           <input class="button-primary" type="submit" value="Submit">
          </div>
        </div>

这是我的JavaScript：

email = '';
  password = '';
  firstName = '';
  lastName = '';
$(function() {
  $('.button-primary').click(function(event) {
    var email = $('#emailInput').val();
    var password = $('#passwordInput').val();
    var firstName = $('#fnameInput').val();
    var lastName = $('#lnameInput').val();
    $.post( 'http://<MY-DYNO>.herokuapp.com/api/v1/users/', { fname: firstName,
      lname: lastName,
      password: password,
      email: email,
      success: function(response) {
        $('#registerStatus').text('Successfully registered');
        console.log(response);
      }
    });
  });

这显然不是解决这个问题的最好方法，但我正在学习AJAX。如果有人能够提供一些很棒的指导，那么我已经在这方面苦苦挣扎了好几个小时。

编辑：我道歉，我没有描述我遇到的确切问题。点击提交后，div会填充成功注册，但数据未正确提交到服务器，它正在传递undefined。

Answer 1

在我的第一次观察中，我发现你的JS代码不正确。它应该是：

$(function () {
    $('.button-primary').click(function (event) {
        var email = $('#emailInput').val();
        var password = $('#passwordInput').val();
        var firstName = $('#fnameInput').val();
        var lastName = $('#lnameInput').val();
        $.post('http://art-share.herokuapp.com/api/v1/users/', {
            fname: firstName,
            lname: lastName,
            password: password,
            email: email
        }, //<-- Note closing json
        function (response) { // <-- Note one change here
            $('#registerStatus').text('Successfully registered');
            console.log(response);
        });
    });
});

文档： https://api.jquery.com/jquery.post/

Answer 2

你实际上没有说过你的问题是什么问题（表单没有提交？）所以对于如何调试这样的javascript问题，这将是一个非常普遍的答案。

首先，您应该向console.log插入电话，以便更好地了解情况：

$(function() {
  console.log('DOCUMENT READY'); // <<<<<<<<< ADD LOG HERE
  $('.button-primary').click(function(event) {
    console.log('CLICK EVENT WORKED'); // <<<<<<<<< ADD LOG HERE
    var email = $('#emailInput').val();
    var password = $('#passwordInput').val();
    var firstName = $('#fnameInput').val();
    var lastName = $('#lnameInput').val();
    console.log('SENDING', email, password, firstname, lastname); // <<<<<<<<< ADD LOG HERE
    $.post( 'http://<MY-DYNO>.herokuapp.com/api/v1/users/', { fname: firstName,
      lname: lastName,
      password: password,
      email: email,
      success: function(response) {
        $('#registerStatus').text('Successfully registered');
        console.log(response);
      }
   }).done(function() { console.log('your ajax call worked'); }) // <<<<<<<<< ADD LOG HERE
   .fail(function() { console.log('something went wrong'); }) // <<<<<<<<< ADD LOG HERE
   .always(function() { console.log('something went really wrong'); }); // <<<<<<<<< ADD LOG HERE
  });
});

现在运行此操作并查看哪些日志已写入（在Chrome中转到right click webpage > inspect element > console） - 您现在可以知道代码在停止工作之前的距离。

调试ajax请求的另一个有用工具（假设您再次使用Chrome）是调试控制台中的Network选项卡。在您的网页右侧click > inspect element，然后选择顶部的Network标签。你会看到这样的事情：

enter image description here

确保左上角的圆圈是红色，如果没有，请按下它。现在，Chrome正在监控当前网页的网络请求（包括ajax请求），现在您可以提交表单并确保将新记录添加到此请求列表的顶部中。然后，您可以单击该请求，并确切地查看它提交的URL，提交的数据以及响应的内容。

您还应该使用顶部的Console标签。如果您的请求被阻止，因为您在domainA.com上并向domainB.com发出了一个AJAX请求（这是非法的 - 您不能在没有CORS技术（如JSONP）或服务器上没有明确的CORS头的情况下执行AJAX跨域）然后这样的错误将显示在控制台选项卡中：

enter image description here （注意：上面图片中的请求被adblock阻止了 - 但是你得到了图片，这个标签会告诉你是否/为什么AJAX请求失败了）

您现在应该知道究竟是什么阻止了您的AJAX请求正常工作。如果没有console.log调用运行，则问题在于您在按钮上包含jQuery或事件侦听器。如果在AJAX调用之前的'SENDING'console.log不起作用，那么你知道问题与从网页上的DOM元素中提取数据有关（或者在之前调用console.log和此之间的任何内容）一）。如果所有这些console.log调用都有效，那么您应该检查Network标签并继续查看Chrome中的Console标签，以获取有关出错的更多线索，因为此时问题很可能与你违反相同的原始政策，因此必须采用一种技术like this来解决它，或者问题可能只是你的服务器，你可能想考虑在那里调试选项。

编辑根据您所说的服务器没有收到您发送的内容的编辑，为了确认这是真的，您应该先检查{{1选项卡，看看你发出的值是否被打印出来（回想一下，我们添加了一个console.log调用来打印出firstName，lastName等）。如果您没有在Console标签上看到打印出来的内容，则问题与Console不正确的行有关。

如果您确实在var firstName = $('#fnameInput').val();标签上看到了打印电子邮件，密码，firstName和lastName的正确值，则需要执行上述操作，以便在Chrome中的“网络”标签中记录请求（当您在“网络”选项卡中单击请求时，在“请求标题”或“表单数据”部分中，您应确认您要发送的变量是否存在。如果您确实看到变量是作为请求的一部分发送的，那么您还应该确保提交正确的请求（Console而不是POST）。您还应该使用服务器代码确认您正在为变量发送正确的名称（“email”而不是“Email”）。如果所有这些都匹配，那么问题可能出在服务器应用程序上。

简单的AJAX POST请求提交表单与jQuery（或不）

2 个答案: