Question

在页面like this上，我可以编写哪种代码来阻止页面发送GET请求（或POST请求）？

页：

<body>
    <p>Let's do the login thing
        <br>
    </p>
    <form id="keyform">
        <table>
            <tr>
                <td>
                    <div class="midform">
                        <input type="text" id="id" placeholder="ID">
                        <br>
                        <input type="password" id="key" placeholder="Password">
                    </div>
                </td>
                <td>
                    <div class="submitform">
                        <input type="submit" id="submit" value="Log in">
                    </div>
                </td>
            </tr>
        </table>
    </form>
    <div id="output"></div>
</body>

代码：

d3.select("#keyform").on("submit", function () {
    console.log(d3.select('#key').property("value"));
    return false;
});

我打算在提交时捕获密码的值，通过md5运行它并将其发送到服务器以与数据库中的哈希进行比较。但点击＆＃34;提交＆＃34;导致页面发送GET，这是不可取的。

Answer 1

添加脚本标记并编写一个函数来更改密码值，如下所示......

<script>
function encrypt(){

    var pwd = document.getElementById('password').value;
    // do md5 on pwd and store it back to pwd.
    document.getElementById('password').value = pwd;

    //false to prevent submit, or replace true if you need the form to be submitted after executing the above code inside the function (updating the password field).
    return false;
}
</script>

并触发表格标签中提交表格的功能。

<form id="keyform" onsubmit='return encrypt()'>

Answer 2

对于初学者，我尝试通过将按钮的ID和类型更改为＆＃34;登录＆＃34;来提示表单不提交。和＆＃34;按钮＆＃34;分别和onSubmit()链接到onClick。但是这使得事件根本不起火，这意味着我无法访问文本框值。

然后我尝试删除表单，这意味着我有两个输入和一个只是浮动的按钮。这一次，onClick 发生了，我能够读取ID和密码的值。我假设锁定数据，以便在提交之前无法访问。

我还怀疑删除表单意味着我不再拥有任何内置的密码保护，因为我可以通过编程方式拦截文本字段的值。

从密码字段中检索值

2 个答案: