JavaScript 将值发送到后端(隐藏的 html 输入或所有方式)
Posted
技术标签:
【中文标题】JavaScript 将值发送到后端(隐藏的 html 输入或所有方式)【英文标题】:JavaScript send value to the backend (hidden html input or all means) 【发布时间】:2021-12-04 19:08:09 【问题描述】:我有两个非常简单的表格,如下所示:
<form name='a' id='a'> // form a
<input type="text" name="x" id="x"> //input 1
<input type="text" name="y" id="y"> //input 2
<button>submit</button>
</form>
提交表单 a 时,URL 查询字符串将类似于 example.com/?x=1&y=2
<form name='b' id='b' method="POST"> //form b
<input type="hidden" name="sum" id="sum"> // hidden input sum
</form>
我有一个计算脚本代码,它计算输入 1 和输入 2 的总和,然后将总和存储到“表单 b”中隐藏的“输入总和”
<script>
window.addEventListener("DOMContentLoaded", function()
function calculate()
// I want it also to work when someone paste the url example.com/?x=1&y=2
const urlParams = new URLSearchParams(window.location.search);
x = urlParams.get('x')
y = urlParams.get('y')
sum = parseInt(x)+parseInt(y)
document.getElementById('sum').value = sum //store sum to hidden input
calculate()
);
</script>
当有人提交表单或粘贴 URL 时,我如何将隐藏的“输入总和”的值发送到后端(Django)?
如果可行的话,我更喜欢这样的东西:
if sum.value not empty:
form_b.submit()
form_b.prevent_page_refresh
我不知道这是否可能或如何在 js 或 ajax 中实现,如果没有,我愿意接受所有想法。
编辑:在 def function calculate()... 之后的 Ajax 解决方案,并删除了第二种形式:
$.ajax(
type:'POST',
url:'% url "index"%',
headers:
'X-CSRFToken': ' csrf_token '
,
data:
sum:sum,
,
success: function());
【问题讨论】:
您在提交第一个表单时向后端发出 GET 请求,您不能在该请求中执行您需要执行的操作吗?为什么你需要做一个额外的 POST? @IainShelvington 我无法使用GET,实际上查询参数(“sum”)的值超过了chrome字符限制,超过2500个字符,即使chrome url bar没有长度限制,这么长的网址看起来不太好看。 @IainShelvington,我只接受一种形式,甚至没有形式,如果它将计算出的“总和”发送到后端 为什么要兜兜转转?您首先向后端发出请求以获取页面,同时指定x
和y
作为查询参数,为什么不在后端本身计算“sum”呢?
@AbdulAzizBarkat,我无法在后端计算这样的东西,“sum”的长度远远超过 2500 个字符,我希望用户分担这样的成本,而不是服务器。跨度>
【参考方案1】:
不确定我是否完全理解你的意思,但我认为这就是你要找的东西?
const form = document.getElementById('a');
const sumInput = document.getElementById('sum');
function calculate()
const urlParams = new URLSearchParams(window.location.search);
x = urlParams.get('x');
y = urlParams.get('y');
const sum = parseInt(x) + parseInt(y);
sumInput.value = sum;
fetch('http://localhost:8000',
method: 'POST',
body: JSON.stringify(
value: sum
)
);
window.addEventListener("DOMContentLoaded", () =>
calculate()
);
<form name="a" id="a" onsubmit="calculate">
<input type="text" name="x" id="x">
<input type="text" name="y" id="y">
<button>submit</button>
<input type="hidden" name="sum" id="sum">
</form>
基本上,计算结果并发布它的简单表格?不知道隐藏输入有什么用。
【讨论】:
最后我用了ajax,Ajax在def函数计算解决之后,我也去掉了第二种形式,但是fetch也可以,谢谢!以上是关于JavaScript 将值发送到后端(隐藏的 html 输入或所有方式)的主要内容,如果未能解决你的问题,请参考以下文章