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

原文 标签 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填充了“成功注册”,但是数据没有正确提交到服务器,它正在传递undefined

最佳答案

在我的第一次观察中,我发现您的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 - 简单的AJAX POST请求使用jQuery提交表单(或不使用jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29752093/

相关文章:

javascript - 时间戳PHP到jQuery格式

javascript - 滑动下一个项目时暂停 youtube 视频

javascript - 如何编写一个接受回调函数的jQuery插件方法?

html - float 未结算

javascript - ExtJS 门户布局问题(内部元素的自动高度/宽度)

Javascript无法识别的表达式

javascript - 设置和测试 UI 路由器

javascript - jQuery选择器的元素ID中的小数位

java - 如何从Java swing程序打开php文件?

javascript - jQuery选择器在未知深度下获取第(nth)个元素?