时间戳

首页 > 解决方案 > 使用 jquery 将所有表单字段作为 JSON 提交到 API

javascript - 使用 jquery 将所有表单字段作为 JSON 提交到 API

问题描述

我是 Javascript 和 jquery 的新手。我正在尝试创建一个简单的联系表单，它将所有输入提交给 JSON 格式的 API。

当我将表单提交到我的 API 时，我得到一个空的 JSON 字符串，例如{}

我在 Stack Overflow 和 Google 上花了很长时间试图解决这个问题，但完全失败了！

我的 javascript 是：

$("#contact-form").submit(function(e) {
    e.preventDefault();
    
    var formData = $(this).serializeObject();

    $.ajax({
        type: "POST",
        url: "http://localhost:8000/",
        data: JSON.stringify(formData),
        dataType: 'json',
        contentType: 'application/json; charset=utf-8'
    }).done(function(response) {
        // handle a successful response
    }).fail(function(xhr, status, message) {
        // handle a failure response
    });
});

HTML是：

<form id="contact-form" class="probootstrap-form" method="POST">
  <div class="form-group">
    <label for="name">Your Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">Your Email</label>
    <input type="text" class="form-control" id="email">
  </div>
  <div class="form-group">
    <p>Will you attend?</p>
    <label for="yes"><input type="checkbox" id="yes"> Yes, I will be there</label> <br>
    <label for="no"><input type="checkbox" id="no"> Sorry, I can't come</label> <br>
  </div>
  <div class="form-group">
     <label for="note">Note</label>
     <textarea name="" id="note" cols="20" rows="5" class="form-control"></textarea>
  </div>
  <div class="form-group">
     <input id="submit" type="submit" class="btn btn-primary btn-lg" value="Send RSVP">
  </div>
</form>

提前致谢！

标签： javascripthtmljquery

解决方案

您的字段没有“名称” - 添加那些应该可以完成工作。

如：

<input type="text" class="form-control" id="name" name="username">

推荐阅读