网页中超链接的简化问题（如何避免超链接的get提交）

Posted 2020-07-02 Mr. Ma

废话不多，直接看例子吧：

<a href="###?key=${*** }">跳转</a>

上面这个超链接被点击后，肯定会向某个控制器发送一个get请求，而其中key后面的数据会显示在地址栏内，如果有中文的话，可能还会出现乱码等情况。所以直接用超链接传送数据不是一个好的选择。下面有一个更好的办法来解决这个问题：

<a style="text-decoration: underline;cursor: pointer;color: blue;" onclick="update(‘${user.userName }‘)">跳转</a>

可以看出，在这段代码内，我把超链接内的 href 属性去掉了，当然添加CSS代码来弥补超链接失去href 后的样式，我称该<a></a>标签为：伪链接。

OK，我在伪链接内添加了一个onclick点击事件，这样当点击该伪链接的时候就会触发这个js函数。然后看下面这段代码：

<form action="" method="post">
        <input type="hidden" id="userName" name="userName"/>
 </form>

function update(userName){
                document.getElementById(‘userName‘).value = userName;
                document.forms[0].action = ‘*****.do‘;
                document.forms[0].submit();
            }

很容易看出，我在页面添加了一个form标签，form标签内有一个隐藏的input标签，隐藏的input标签用来承载原超链接要传送的数据，这里我通过js的点击事件，把数据封装到隐藏的input内，而input所在的form使用post提交，这就避免了当初出现的不必要的麻烦。而且这样做，不会将某些服务器需要的数据显示在地址栏。