如何使用异步通信将表单数据发送到test.html？
发布于 2021-01-29 15:01:41
我想使用异步通信将表单数据发送到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和value的变量发送到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和值的值。我的代码有什么问题？如何解决？
关注者
0
被浏览
73
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.searchonload = () => { // do stuff with key, value pairs passed from `window.opener` console.log([...new URLSearchParams(location.search).entries()]) }
