JavaScript 将值发送到后端（隐藏的 html 输入或所有方式）答案

【问题标题】：JavaScript send value to the backend (hidden html input or all means)JavaScript 将值发送到后端（隐藏的 html 输入或所有方式）
【发布时间】：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 个字符，我希望用户分担这样的成本，而不是服务器。跨度>

标签： javascript jquery django ajax xmlhttprequest

【解决方案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也可以，谢谢！