如何从 HTML 表单创建 JSON 格式的请求？答案

【问题标题】：How to create a JSON formatted request from an HTML form?如何从 HTML 表单创建 JSON 格式的请求？
【发布时间】：2018-12-29 17:59:08
【问题描述】：

这是一个初学者的问题。我已经尽可能多地完成了作业，所以我被困住了，所以我正在寻求帮助。

我正在尝试创建一个应用程序来学习 REST，并且我想将我的请求数据格式化为 JSON。

我从 HTML 表单开始，首先确认“发送”或请求数据是否正确，但在浏览器开发工具 (Firefox) 中没有看到它作为 HTTP 请求的一部分发送。我有一个服务器正在运行，我可以通过我的本地主机打开页面，但是还没有客户端/后端代码，比如 Java Servlet——我现在只有一个带有“提交”按钮的 HTML 表单，在本地主机在我的浏览器中。

我的目的是确认正在创建和发送 JSON 格式的数据。如果我需要更多基础设施，请告诉我 - 我不确定我正在运行的生成请求的测试是否可以仅使用 HTML 表单，但还没有客户端 Java 代码。

我已将“enctype='application/json'”应用于表单，我认为应该将表单数据格式化为 JSON。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My App</title>
</head>
<body>
<form enctype='application/json' name='testForm' method="post">
  <input name='name' value='JSONForm'>
  <select name='hind'>
    <option selected>Option1</option>
    <option>Option2</option>
  </select>
  <input type='checkbox' name='shiny' checked>
  <input type='button' value='SubmitForm'>
</form>
</body>
</html>

这里是请求和响应标头。

还有一个“响应”窗格，但没有“请求”窗格，所以我不确定如何查看发送的数据 - 或者我根本没有创建请求。

那么，如何确认/查看我已创建并发送 JSON 数据？如何“发送”数据 - 单击“提交”按钮是否足以“发送”请求中的数据？

谢谢。

【问题讨论】：

我尝试上传我的开发工具页面的屏幕截图，但它们没有出现。上传用链接替换了我的图片，我按照说明用“”括起来，但我仍然看不到它们。建议？
不应该需要包含额外的符号来发布图片，应该能够通过点击Image按钮和“拖放”你的图片到问题表中来上传图片，或者链接到一个图片已经在 Imgur 上

标签： json request

【解决方案1】：

首先，按钮类型的按钮不提交表单，仅 <button type="submit"> 或 <input type="button">。另外，我认为不可能改变通过 HTML 格式化表单的方式，只有 JavaScript。为此，您需要添加一个脚本来捕获输入中的值，然后构建您的 JSON 对象并通过 AJAX 帖子发送它。 https://www.makeuseof.com/tag/use-ajax-send-web-form/

【讨论】：