Javascript 为什么我不能将数据传输到另一个HTML页面_Javascript_Html_Css

Javascript 为什么我不能将数据传输到另一个HTML页面

javascript html css

Javascript 为什么我不能将数据传输到另一个HTML页面,javascript,html,css,Javascript,Html,Css,我完全了解这样一个事实，即有几十个问题与此相关，但我觉得我的场景与您决定的略有不同，我正在尝试将表单数据从1 HTMLtest.html传输到另一个HTMLtut1.html 基本上，我试图做的是提取数据并在另一个模式中显示。我遇到的问题是，我在测试运行中设法做了相同的事情，但由于某种原因，当我将其添加到主模式中时，它并没有真正起作用。我肯定我错过了一些小东西，但我不能确定它。任何修复此问题的帮助都会非常有用。您可以注意的一点是，在测试运行中，我使用了一个按钮提交，但在这里，我使用了href。不

我完全了解这样一个事实，即有几十个问题与此相关，但我觉得我的场景与您决定的略有不同，我正在尝试将表单数据从1 HTMLtest.html传输到另一个HTMLtut1.html

基本上，我试图做的是提取数据并在另一个模式中显示。我遇到的问题是，我在测试运行中设法做了相同的事情，但由于某种原因，当我将其添加到主模式中时，它并没有真正起作用。我肯定我错过了一些小东西，但我不能确定它。任何修复此问题的帮助都会非常有用。您可以注意的一点是，在测试运行中，我使用了一个按钮提交，但在这里，我使用了href。不确定这是否是导致此问题的原因。我注意到的另一件事是，由于href的链接，而不是表单操作，页面被重定向到第二个页面

HTML1包含表单。用户在其中输入输入

<html>
<head>

</head>                 

<body>

                <div  class="feedback-background">
                        <div class="feedback-content">
                            <div class="close">+</div>
                            <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

                            <form name="FeedbackForm"  method="get">
                                Name:
                                <input id="Name" name="N" type="text" placeholder="Name">
                                E-Mail:
                                <input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
                                What do you think about us?<br>
                                <textarea id="comment" rows="6" cols="33" name="C"></textarea>
                                <br>
                                How would you rate us ?
                                <br>

                            <label><input type ="radio" name="rating" id="rating" value="Excellent" checked>Excellent</label>
                            <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
                            <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
                            <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
                             <label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
                            <br>

                                <a href="tut1.html" onClick="testJS()" id="submit" type="submit">SUBMIT</a>


                            </form>
                        </div>
                </div>

                <script>

function testJS() {
    var b = document.getElementById('Name').value,
            document.getElementById('comment').value,
    url = 'http://E:\IIT\Homework\web1t/tut1.html?Name=' + encodeURIComponent(b);

document.location.href = url;
}

</script>



</body>

HTML 2 tut1.HTML包含一个我创建的模式，为了方便起见，不包括css

<body>      
<div class="popup">
                <div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been recorded.<br> 
                            <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
                            <br><br>Thank you 
                            for taking your time to do so.<br><br>You will now be re-directed automatically</p>
                </div>
                </div>



    <script>
    window.onload = function () {
    var url = document.location.href,
    params = url.split('?')[1].split('&'),
    data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
     tmp = params[i].split('=');
     data[tmp[0]] = tmp[1];
     }
    document.getElementById('username').innerHTML = data.N;
    document.getElementById('usercomment').innerHTML = data.C;
    }
  </script>


    </body>

PS：我使用了精确的2个代码来填写另一张表格，但它非常简单，而且工作得非常好。我不知道为什么它在这里不工作。任何类型的帮助都会有很大帮助

只需在testJS函数中添加一个preventDefault，如下所示

function testJS(e) {
    e.preventDefault();
    var b = document.getElementById('Name').value,
        document.getElementById('comment').value,
    url = 'http://E:\IIT\Homework\web1t/tut1.html?Name=' + encodeURIComponent(b);

    document.location.href = url;
}

当您手动设置url时，您必须防止默认的a标记行为。

您的代码应该有一个错误输出，但您不知何故没有使用调试工具。我想这对你来说是个好机会

首先，请更改'a tags href'，如'tut1.html'，然后单击它，我想您不会转换到tut1.html。另外，当您转换到“tut1.html”时，url是否与您想要的相同

让我们试试这个

'<a href="tut1.html"~' → '<a href="#tut1.html~'
 (Off course, e.preventDefault is also fine.)

tut1.html也需要更新

window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
        tmp = params[i].split('=');
        data[tmp[0]] = tmp[1];
    }
    // the name is wrong; you set name Name and Comment, when you create the url.
    document.getElementById('username').innerHTML = data.Name;
    document.getElementById('usercomment').innerHTML = data.Comment;
}

供您参考。第一页的操作与您简单使用的相同

<form action='tut1.html' method='get'>
+
<input type="submit" value="submit">

在这种情况下，参数使用其名称和值发送。？N=xxxx&C=yyyy

您不需要自己创建包含参数的url，除非有特殊原因。

您是否尝试过在第二页的脚本中放置console.log或断点，以便查看它是如何填充数据对象的？@David784我不知道如何做，这对Web来说是一个全新的概念，如果您有任何帮助，我们将不胜感激。我建议您开始。它将告诉您如何在各种浏览器中打开开发工具，并且还有一个关于JavaScript控制台的部分，可以帮助您入门。随着您对它越来越熟悉，您可以探索更多的功能。我建议你选择谷歌开发者工具教程。你会发现大量的视频和网络点击。非常感谢你，我会看一下。如果上面的答案解决了你的问题，然后将其标记为正确答案。嗨，我刚上线，但没有解决，数据仍然没有传输。这对你有用吗嗨，非常感谢你提供了非常详细的答案。这确实起到了作用，但我忽略了最上面的href changing部分，因为我不确定这是什么，我认为这不是java脚本？如果我错了，请纠正我，这部分的具体用途是什么？非常感谢你的回答。很抱歉我可能会误解。是的，就在小路上。我想这和cd命令差不多。基本上，href是从当前目录及其文件位置的相对位置启动的，除非您写入绝对文件路径。看，哦，也许你提到tut1.html？。这就是我们所说的散列。这一次，我使用标签的href阻止翻译。你们可能会看到很多网站。当然，通常我们不会把它放在url的开头。这是一种防止过渡的技巧。

<form action='tut1.html' method='get'>
+
<input type="submit" value="submit">