将 HTML 数据从表单发送到 JSON 文件 (Ajax/Jquery)
Posted
技术标签:
【中文标题】将 HTML 数据从表单发送到 JSON 文件 (Ajax/Jquery)【英文标题】:Send HTML data from a form into a JSON file (Ajax/Jquery) 【发布时间】:2021-11-07 12:16:09 【问题描述】:我以前从未这样做过,而且我对 Ajax 的经验也不是很丰富。我想做什么,我相信很简单。
我想从这个表单中获取数据:
<form action="/comics.json" method="post" class="admin__add">
<label for="admin__id">ID</label>
<input type="text" class="admin__id">
<label for="admin__price">Price</label>
<input type="number" class="admin__price">
<label for="admin__url">URL</label>
<input type="text" class="admin__url">
<label for="admin__data-item-description">Data-item-descriptin</label>
<input type="text" class="admin__data-item-description">
<label for="admin__data-item-name">data-item-name</label>
<input type="text" class="admin__data-item-name">
<label for="admin__year">year</label>
<input type="number" class="admin__year">
<label for="admin__issue">issue</label>
<input type="text" class="admin__issue">
<label for="admin__series">series</label>
<input type="text" class="admin__series">
<label for="admin__type">type</label>
<input type="text" class="admin__type">
<label for="admin__label">label</label>
<input type="text" class="admin__label">
<label for="admin__sale-price">sale-price</label>
<input type="number" class="admin__sale-price">
<label for="admin__publisher">publisher</label>
<input type="text" class="admin__publisher">
<label for="admin__extra">extra</label>
<input type="text" class="admin__extra">
<label for="admin__run">run?</label>
<input type="text" class="admin__run">
<label for="admin__weight">weight</label>
<input type="number" class="admin__weight">
<label for="admin__stock">stock</label>
<input type="number" class="admin__stock">
<label for="admin__allowOutOfStockPurchases">allowOutOfStockPurchases</label>
<input type="text" class="admin__allowOutOfStockPurchases">
<button class="admin__submit">SUBMIT</button>
</form>
并将其添加到我的 Json 文件中,该文件的结构如下:
"id" : "crossedonehundred9",
"price" : "2.99",
"url" : "/",
"data-item-description" : "Crossed One Hundred run (32 books)",
"data-item-image" : "/thumbnails/Fantasy Road new and preowned comic book sales - pressing and cleaning service at fantasy road - Crossed One Hundred 9.jpg",
"data-item-name" : "Crossed One Hundred full run",
"year" : "2012",
"issue" : "9",
"series" : "Crossed One Hundred",
"type" : "",
"label" : "",
"sale-price" : "",
"publisher" : "Avatar",
"extra" : "",
"enlarge" : "/img/Fantasy Road new and preowned comic book sales - pressing and cleaning service at fantasy road - Crossed One Hundred 9.jpeg",
"run" : "",
"dimensions" :
"weight" : "100"
,
"stock" : 1,
"allowOutOfStockPurchases" : false
到目前为止,我已经得到了这段代码,但我对自己在做什么一无所知,而且我知道它完全错误。
$("admin__submit").click(function()
var id = $('.admin__id');
var price = $('.admin__price');
var url = $('.admin__url');
var data1 = $('.admin__data-item-description');
var data2 = $('.admin__data-item-name');
var year = $('.admin__year');
var issue = $('.admin__issue');
var series = $('.admin__series');
var type = $('.admin__type');
var label = $('.admin__label');
var price = $('.admin__sale-price');
var publisher = $('.admin__publisher');
var extra = $('.admin__extra');
var run = $('.admin__run');
var weight = $('.admin__weight');
var stock = $('.admin__stock');
var allowOutOfStockPurchases = $('.admin__allowOutOfStockPurchases');
$.post("comics.json",
"id" : '"' + id + '"',
"price" : '"' + price + '"',
"url" : "/",
"data-item-description" : '"' + data1 + '"',
"data-item-image" : '"' + url + '"',
"data-item-name" : '"' + data2 + '"',
"year" : '"' + year + '"',
"issue" : '"' + issue + '"',
"series" : '"' + series + '"',
"type" : '"' + type + '"',
"label" : '"' + label + '"',
"sale-price" : '"' + sale-price + '"',
"publisher" : '"' + publisher + '"',
"extra" : '"' + extra + '"',
"run" : '"' + run + '"',
"dimensions" :
"weight" : '"' + weight + '"'
,
"stock" : stock,
"allowOutOfStockPurchases" : allowOutOfStockPurchases
,
function(data, status)
alert("Data: " + data + "\nStatus: " + status);
);
);
【问题讨论】:
【参考方案1】:只需为您的每个输入添加 .val()。
var price = $('.admin__price');
在这里您参考了您的输入并将其保存为可变价格。因此,每当您需要获取它的值时,您都会调用 .val()
$.post("comics.json",
"id" : id.val() ,
"price" : price.val(),
这应该可以解决问题
【讨论】:
谢谢您 - 当我单击提交按钮时,我仍然收到 - 此页面无法正常工作 如果问题仍然存在,请联系网站所有者。 HTTP 错误 405 那是您试图将该数据发送到不存在的页面。您的目标是“comics.json”,应该有您想要定位的服务器请求的路径 啊,我明白了。我现在已将“comics.json”更改为“/comics.json”而且我仍然遇到同样的错误 - 这不是你的意思吗? Json 文件位于根目录 Ajax 用于发送到服务器而不是发送到文件。 .json 是文件而不是服务器请求 啊,我明白了。我想我可能浪费了我的时间,因为我的网站没有后端。有什么方法可以在没有后端的情况下从 html 表单更新 Json 文件?以上是关于将 HTML 数据从表单发送到 JSON 文件 (Ajax/Jquery)的主要内容,如果未能解决你的问题,请参考以下文章
将数据从 HTML 表单发送到 Flask 中的 Python 脚本
如何使用 Hibernate、Spring MVC 将数据从单个表单发送到多个数据库表