Question

我是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的正确方法（复选框列表最终会很长，所以我的第一个数组方法可能不是最好的想法），这仍然是发送整个表单的正确方法最终来自checkbox.html？

如果从table.html开始，我们按下按钮进入checkbox.html。在checkbox.html中，我按下按钮进入table.html并最终发回数据。

Table.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>

checkbox.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>

Answer 1

我想到的最简单方法是使用<form>，发出GET请求。然后您的地址将包含数据。例如：如果您编写http://stackoverflow.com/search，您的浏览器将加载搜索页面，但http://stackoverflow.com/search?q=j表示“我正在向该地址传递参数'q'，其值为'j'。这个例子可以解决这个问题：

<!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>

您可以将任何网址放在表单的操作属性中。

然后，在目标页面中，您可以读取window.location.href的值。

试图找出如何接收发送到其他网页的价值

1 个答案: