Question

我正在尝试让我的网站首先询问简单数据而不是继续加载页面，但我无法弄明白。（所以先问问数据然后打印打印此处）

这就是我现在所拥有的：

<html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                clearInterval(i)
            }
        }, 100);
    </script>

    <h1>PRINT THIS AFTER</h1>

请帮帮我

------------- ---------------- EDIT

我决定使用innerHTML来编辑带有id编辑的div中的html，这样它就不会加载html了

代码：

<html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                document.getElementById("edit").innerHTML = "<h1>PRINT THIS AFTER</h1>";
                clearInterval(i)
            }
        }, 100);
    </script>
    <div id="edit">
    </div>

Answer 1

我已经阅读了其他回复和您的评论。正如其他人在这里建议的那样，最简单的方法是隐藏H1或将H1放入隐藏的div中，然后你可以通过你的＆＃34; sendIt＆＃34;来显示div。如果登录成功，则使用Javascript进行操作。对于它的价值，你不能暂停＆＃34;加载内容的网站。无论Javascript在做什么，HTML中嵌入的任何内容都将加载。

如果隐藏内容不够好（可能出于安全原因，您不希望向某人显示内容，除非他们已登录，因为隐藏它仍然会让他们查看来源），那里的内容是＆＃39;只有两种方法可以做到这一点。首先是服务器端编程。发布到同一页面，如果存在登录条件，则显示内容而不是登录表单。

您可以使用 AJAX请求的第二种方法。如果登录成功，您可以从服务器上包含要显示的内容的其他网页动态加载内容。请注意，您动态加载的页面应具有某种类型的安全性（如服务器端编程），以验证此人是否已登录，否则您将返回同一个洞，服务器端方法也是如此。如果内容或AJAX页面没有以某种方式验证，他们会找到一种方法来查看它。

这个问题比你问我们的问题有点陡峭，但是有很多关于简单的AJAX请求或使用PHP等服务器端编程语言的教程。现在您已经了解了如何执行此操作，您可以开始尝试。

Answer 2

    <html>
<h1>PRINT THIS BEFORE</h1>
    <form id="login">
        name: <input id="name" type="text">
        password: <input id="password" type="password">
        <input value="log-in" type="button" onclick="sendIt()">
    </form>
    <script>
        var send = false;
        function sendIt() {
            send = true;
        }

        var i = setInterval(function(){
            console.log("f")
            if(send) {
                document.getElementById("login").remove();
                document.getElementById("h1show").removeAttribute("hidden");
                clearInterval(i)
            }
        }, 100);
    </script>

    <h1 id="h1show" hidden>PRINT THIS AFTER</h1>

在h1上使用隐藏属性，然后按以下方式删除它：

document.getElementById("h1show").removeAttribute("hidden");

它会出现。

Answer 3

当你按下按钮然后页面刷新时你的表单提交，你再次看到你的表单。

如果你想在没有页面刷新的情况下发出请求，你应该在提交时返回false并且必须使用AJAX技术。

您可以使用CSS来显示\隐藏您的网站内容或后端以控制您的HTML。

如果您希望您的HTML不包含网站内容，请在登录后重定向到带有cookie检查的页面或通过AJAX加载网站内容。

Answer 4

获取必要的信息

的login.html

<h1>PRINT THIS BEFORE</h1>
<form id="login" action="data.html">
    name: <input id="name" type="text" required>
    password: <input id="password" type="password" required>
    <button type="bubmit">log in</button>
</form>

如果上一页包含发送到新页面的必填信息

data.html

<h1>PRINT THIS AFTER</h1>

暂停网站，直到按钮按下Javascript

4 个答案: