MM32搭建服务器——网页跳转和自动提交表单

最新推荐文章于 2025-05-26 16:38:55 发布

Rose Island

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量491

点赞数 1

分类专栏：网页设计文章标签： web html javascript 嵌入式

本文链接：https://blog.youkuaiyun.com/weixin_42150654/article/details/116573056

版权

网页设计专栏收录该内容

6 篇文章

订阅专栏

Foreword

又是一周啦，今天周日，真的蛮烦调休的，前后都累成狗。在鼻窦炎的折磨下，这三天过的太不好了，不戴耳钉不涂口红不打扮不养花不烧饭，脾气也很差，特别想小林。

网页自动跳转

因为我想通过网页是否登录的状态来判断是直接进入主页呢，还是进入登录页面，所以我在主页上设置了根据状态来判断是否自动跳转到登录页面的功能。

今天这一篇文章还是基于SSI和CGI接口的，所以关于SSI和CGI可以参考「Rose Island」MM32搭建Web服务器——SSI和CGI接口。

实现方法如下，location.href可以跳转到指定的URL页面：

<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <title>Mindmotion MM32 UART to Ethernet Gateway</title>
    <script>
        var state = "<!--#state-->";	//SSI接口
        if (state == "0") {
            javascript: location.href = 'login.shtm';
        }
    </script>
</head>

关于页面跳转有很多种不同的效果，因为没有深入研究过，这里就不详述啦。

网页超链接

不过可以写一下超链接的方法，一般来说超链接默认地是新页面覆盖当前页面，在这个项目里面我想要点击超链接之后打开一个新的窗口页面，方法如下：

<a href="http://www.mindmotion.com.cn/" target="_blank">灵动官网</a>

超链接打开方式的不同主要在于target属性：

target	function
_self	默认值。在当前的框架中打开超链接文档
_blank	在新窗口页面中打开超链接文档
_parent	在父框架中打开超链接文档
_top	在整个窗口中打开超链接文档
frameName	用于frame框架中，打开超链接文档到制定的框架中

网页自动提交表单

在项目中我设定了退出登录的超链接，点击之后会跳转到登录页面并且刷新登录状态为0，所以我在登录页面上想做一个自动提交表单的功能，可以自动刷新登录状态。

关于表单GET&POST提交的方法，可以参考「Rose Island」MM32搭建Web服务器——POST指令。

实现方法如下，当页面打开的时候就执行changeLoginState()函数，通过.submit把form里的内容提交给CGI：

<body onload="changeLoginState()">
    <form id="changeStateFormId" action="changeState.cgi" method="POST" name="changeState" style="display:none">
        <input type="hidden" name="state" value="0">
    </form>

    <form action="login.cgi" method="POST" name="login">
        <label>
            <h1>用户账号登录</h1>
            <hr><br><br>
        </label>
        <div id="login">
            账&nbsp;&nbsp;号：<input type="text" placeholder="请输入账号名" name="username" required><br><br>
            密&nbsp;&nbsp;码：<input type="password" placeholder="请输入密码" name="password" required><br><br><br>
            <input id="submit" type="submit" name="checkinSubmit" value="登  录">
        </div>
    </form>
    <script>
        function changeLoginState(){
            var stateValue = "<!--#state-->";
            if(stateValue == "1"){
            	var form = document.getElementById("changeStateFormId");
            	form.submit();
            }
        }
    </script>
</body>