如何使用异步通信将表单数据发送到 test.html？答案

【问题标题】：How can I send form data to test.html by using asynchronous communication?如何使用异步通信将表单数据发送到 test.html？
【发布时间】：2026-01-26 11:15:02
【问题描述】：

我想通过异步通信将表单数据发送到 test.html。我在 index.html 中写了

<body>
　  <form method="post" action="">
    <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
    {% for i in json_data.items.values %}
            <option value="{{forloop.counter}}">{{ i }}</option>
    {% endfor %}
    </select>

    {% for key, values in preprocessed %}
    <select name="type" id=type{{forloop.counter}}>
    {% for counter, value in values %}
        <option value="{{forloop.counter}}">{{ value }}</option>
    {% endfor %}
    </select>
    {% endfor %}
    </form>

  <script type="text/javascript">

        $(document).ready(function () {
            $('#mainDD').on('change', function() {
              var thisType = "type" + $(this).val();
              for(i=1; i<6; i++) {
                  var thisId = "type" + i;
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });


  </script>

     <form id="postform" action="http://localhost:8000/app/test_view" method="POST">
      {% csrf_token %}
      <input type="submit" value="SEND">
     </form>
     <script type="text/javascript">
            $('[name=type]').change(function() {
            var array1 = [];
            var array2 =[];
                $('[name=main] option:selected').each(function() {
                array1 = $(this).text();
                console.log(array1);
            });

                $('[name=type] option:selected').each(function() {
                array2 = $(this).text();
                console.log(array2);
            });
        });
        $.ajax({
            url: 'test.html',
            dataType: 'html',
            timeout:3000,
            async: true,
            success: function(html) {
                $('.newsarea').html(html).fadeIn(5000);
            },
            error: function() {
                alert('Error');
            }
        });
     </script>
  </body>

我想将选定的 i 和值的变量发送到 test.html。现在，当我按下发送按钮时，test.html 中没有显示任何内容。我写了 test.html 之类的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RESULT</title>
</head>
<body>

<h2>TOPIC</h2>
<div class="newsarea">
</div>

</body>
</html>

我想在这个地方显示选定的 i & value 的值。我的代码有什么问题？我该如何解决这个问题？

【问题讨论】：

什么时候应该将值发送到test.html？你怎么知道test.html 正在被用户访问？
我想在我放发送按钮时将这些值发送到 test.html。我无法理解你的第二个问题。你能写得更详细吗？
用户何时访问test.html？
@guest271314 当用户按下发送按钮时
你真的应该阅读你在做什么，而不是在没有理解的情况下从互联网上复制随机代码。

标签： javascript jquery python html django

【解决方案1】：

如果document 与原始document 来自同一来源并且由用户操作打开，则可以将参数作为查询字符串传递。

  document.querySelector("input[type=button]").onclick = e => {
    // pass key, value pairs to `test.html`
    const test = window.open(`test.html?${key}=${value}`, "_blank");
  }

在打开window 时获取并解析location.search

  onload = () => {
    // do stuff with key, value pairs passed from `window.opener`
    console.log([...new URLSearchParams(location.search).entries()])
  }

plnkrhttp://plnkr.co/edit/MlCQZpkfBXFwxdR6gz5x?p=preview

【讨论】：

thx ur cmets。这2个代码我应该在哪里写？index.html的js的script标签，对吧？
第一个代码应该在 HTML document 中，打开 "test.html"。第二个代码应该在"test.html"
谢谢你的 cmets，我读了 plank，我写了你的代码。但在 test.html 中，只有 csrfmiddlewaretoken 和随机字母和数字显示不变量i&value。我该如何解决这个问题？
什么是csrmiddlewaretoken？
现在 test.html 显示 csrfmiddlewaretoken,MWe8s6ylBOG4qaR3l0nsZPHSfEhANSGflzfI6ZCRaDMDJKix7A2aSAzvm3DOnXpP 代替