我是 JavaScript 和网络编程的新手。我找到了很多关于如何将数据发送到另一个网页而不是如何在另一个网页上接收数据的示例。
我一直在查看这些链接:first ex , second ex , third ex , fourth ex , fifth ex , really interesting ex , seventh ex , eighth , submit binding .现在我已经设置好了，所以我点击一个按钮，它就会在页面之间来回切换。我最终想发送整个 checkbox.html 表单并提取在 table.html 页面上检查的项目的信息以显示在表标题中。
但是，现在我正在尝试弄清楚如何将基本数据发送到 table.html 页面(来自 checkbox.html)并从那里检索它。有谁知道该怎么做？我在下面留下了注释掉的代码。随意忽略它，因为它还没有被使用。我确定我需要使用 GET，但我不确定我是否需要 POST 发送它或者返回(我现在有)是否足够。如果我需要 GET，我不确定它在 table.html 中的什么位置。另外，如果将整个表单发送到 table.html 是正确的方法(复选框列表最终会很长，所以我的第一个数组方法可能不是最好的主意)，这仍然是最终从复选框发送整个表单的正确方法。 HTML？
如果从 table.html 开始，我们按下按钮进入 checkbox.html。在 checkbox.html 中，我按下按钮进入 table.html 并最终发送回数据。
表格.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="utf-8" http-equiv="encoding"/>
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//Used to hide given number row
$(document).ready(function() {
$('#btnHide').click(function() {
// table has header(th), use this
$('td:nth-child(3),th:nth-child(3)').hide();
});
});
</script>
<script type="text/javascript">
//Used to make row editable or not
$(document).ready(function () {
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
});
});
</script>
<script language="javascript" type="text/javascript">
//go to checkbox web page
function btn_changeColumns_onClick()
{
//it doesn't like localhost here
window.location.href = "checkbox.html";
}
</script>
<script type="text/javascript">
//function getUrlVars() {
// var vars = {};
// var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
// vars[key] = value;
// });
// return vars;
//}
//not sure if onload is real to use
//not sure if need to put anything where btntest is
//document.getElementById('btntest').onload = function() {
// $(function(){
// var ckBoxForm = getUrlVars();
// alert(ckBoxForm);
//maybe add something to call getSelectedChbox here
// });
//}
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
//function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
//var selchbox = []; // array that will store the value of selected checkboxes
//var allLabels = []; // array to store value of all checkboxes, selected and not
// gets all the input tags in frm, and their number
//var inpfields = frm.getElementsByTagName('input');
//var lblFields = frm.getElementsByTagName('label');
//var allLabelFields = frm.getElementsByTagName('label').innerHTML;
//var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
//for(var i=0; i<nr_inpfields; i++) {
// if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(lblFields[i].innerHTML);
// if(inpfields[i].type == 'checkbox') allLabels.push(lblFields[i].innerHTML);
//}
//alert(allLabels);
//return selchbox;
//}
</script>
</head>
<body>
<table id="tableone" border="1">
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
</thead>
<tr class="del">
<td contenteditable="false">Row 0 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 0 Column 1</td>
<td contenteditable="false">Row 0 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 1 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 1 Column 1</td>
<td contenteditable="false">Row 1 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 2 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 2 Column 1</td>
<td contenteditable="false">Row 2 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 3 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 3 Column 1</td>
<td contenteditable="false">Row 3 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 4 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 4 Column 1</td>
<td contenteditable="false">Row 4 Column 2</td>
</tr>
<tr class="del">
<td contenteditable="false">Row 5 Column 0</td>
<td><button class="editbtn">Edit</button></td>
<td contenteditable="false">Row 5 Column 1</td>
<td contenteditable="false">Row 5 Column 2</td>
</tr>
</table>
<input id="btnHide" type="button" value="Hide Column 2"/>
<input id="chgColumns" type="button" value="Change Columns Displayed"
onclick="return btn_changeColumns_onClick()" />
</body>
</html>
复选框.html:
<!DOCTYPE html>
<!--
I am child window.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script language="javascript" type="text/javascript">
//go to table web page
function btn_goToTable_onClick()
{
window.location.href = "table.html";
return "stuff";
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form id="myCheckboxForm" method="GET">
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="Ckbox1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="Ckbox2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="Ckbox3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="Ckbox4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
</dd>
</dl>
</div>
<div>
<input id="goBack" type="button" value="Update Table"
onclick="return btn_goToTable_onClick()" />
</div>
</form>
</body>
</html>
最佳答案
我想到的最简单的方法是使用 <form> , 发出 GET 请求。然后您的地址将包含数据。
例如:如果你写 http://stackoverflow.com/search您的浏览器将加载搜索页面，但是 http://stackoverflow.com/search?q=j表示“我正在向该地址传递值为‘j’的参数‘q’。
这个例子可以解决问题:
<!doctype html>
<html>
<body>
<form id="bigsearch" action="http://www.stackoverflow.com/search" method="get">
<input name="q" class="textbox" type="text" maxlength="140" size="80" value="j">
<input type="submit" value="search">
</form>
</body>
</html>
您可以将任何 URL 放在表单的 action 属性中。
然后，在目标页面中，读取window.location.href的值即可获取.
关于javascript - 试图弄清楚如何接收发送到其他网页的值(value)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23810546/