如何使用异步通信将表单数据发送到test.html？ [英] How can I send form data to test.html by using asynchronous communication?
问题描述
我想通过使用异步通信将表单数据发送到test.html。
我在index.html中写道
< body>
< form method =postaction =>
{％for i in json_data.items.values％}
< option value ={{forloop.counter}}> {{i}}< / option>
{％endfor％}
< / select>
{关键字％，预处理％中的值}
{％for counter，value in value％}
< option value ={{forloop.counter}}> {{value}}< / option>
{％endfor％}
< / select>
{％endfor％}
< / form>
< script type =text / javascript> $（$＃
$ b $（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（）; $ b'b}
}
}）。trigger（'change'）;
}）;
< / script>
< form id =postformaction =http：// localhost：8000 / app / test_viewmethod =POST>
{％csrf_token％}
< input type =submitvalue =发送>
< / form>
< script type =text / javascript>
$（'[name = type]'）。change（function（）{
var array1 = [];
var array2 = [];
$（'[name （）函数（）{
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，
成功：function（html）{
$（'。newsarea'）。html（html）.fadeIn（5000）;
}，
error：function（）{
alert（'Error'）;
}
}）;
< / script>
< / body>
我想发送选定的i&值的变量test.html.Now当我把发送按钮，没有什么显示在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&值的值在这个地方。我的代码中出现了什么错误？我该如何解决这个问题？ 如果 document 源自与原始文档相同的来源，并且通过用户操作打开，您可以将参数作为查询字符串传递。
document.querySelector（input [type = button]）。onclick = e => {
//将键值对传给`test.html`
const test = window.open（`test.html？$ {key} = $ {value}`，_blank）;
打开窗口 get&parse location.search
onload =（）=> {
//用`window.opener`传递键值对，
console.log（[... new URLSearchParams（location.search）.entries（）]）
}
plnkr http://plnkr.co/edit/MlCQZpkfBXFwxdR6gz5x?p=preview
I wanna send form data to test.html by using asynchronous communication. I wrote in 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 wanna send selected i & value's variables to test.html.Now when I put send button,nothing is shown in test.html. I wrote test.html like
<!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 wanna show selected i & value's values in this place of .What is wrong in my code?How can I fix this?
If the document originates from same origin as original document and is opened by user action you can pass the parameters as a query string.
document.querySelector("input[type=button]").onclick = e => {
// pass key, value pairs to `test.html`
const test = window.open(`test.html?${key}=${value}`, "_blank");
}
at opened window get and parse location.search
onload = () => {
// do stuff with key, value pairs passed from `window.opener`
console.log([...new URLSearchParams(location.search).entries()])
}
plnkr http://plnkr.co/edit/MlCQZpkfBXFwxdR6gz5x?p=preview
这篇关于如何使用异步通信将表单数据发送到test.html？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
