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

标签 javascript jquery html ajax

我正在尝试通过表单和提交按钮向 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 中填充了已成功注册,但数据未正确提交到服务器,它正在传递未定义

最佳答案

在我的第一次观察中,我发现你的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/

关于javascript - 使用 jQuery(或不使用)的简单 AJAX POST 请求提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29752093/

相关文章:

javascript - 使用 forkJoin 的条件可观察对象

javascript - 使用数据表创建可搜索的图库

javascript - 所有菜单的通用滚动顶部功能

html - Bootstrap 4列对齐问题

javascript - 淡入淡出相关div动画

javascript - 如何通过 JavaScript 获取字符串中的数字?

javascript - 如何限制我的画廊一次显示的行数

javascript - 如何通过可点击的列在同一页面中搜索值

javascript - 将焦点和光标设置到文本输入字段/字符串 w 的末尾。查询

javascript - 在 contenteditable 元素上制作 div 按钮