javascript - 使用 jQuery(或不使用)的简单 AJAX POST 请求提交表单

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 中填充了已成功注册，但数据未正确提交到服务器，它正在传递未定义。

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/