Question

我的代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            function set() {
                var db;
                var request;
                var store;

                var username = document.getElementById("username");
                var password = document.getElementById("password");
                var email = document.getElementById("email");
                var interest = document.getElementById("interest");
                var newuser = {
                        "username": username.value,
                        "password": password.value,
                        "email": email.value,
                        "interest": interest.value
                };
                var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB;
                if ('webkitIndexedDB' in window) {
                    window.IDBTransaction = window.webkitIDBTransaction;
                    window.IDBKeyRange = window.webkitIDBKeyRange;
                }
                request = indexedDB.open("userdb",1);
                request.onerror = function(event) {
                    alert("Error Code:" + event.target.errorCode);
                };
                request.onsuccess = function(event) {

                    if(username.value==""||password.value==""||email.value==""||interest.value==""){
                        alert("Incomplete information");
                    }else{
                        db=event.target.result;  
                        var transaction = db.transaction(["user"], "readwrite");  
                        var objectStore = transaction.objectStore("user");  
                        objectStore.add(newuser);
                        alert("Success");
                    }
                };
                request.onupgradeneeded = function(event) {
                    db = event.target.result;  
                    store = db.createObjectStore("user", {keyPath: "username",autoIncrement: false});
                };
            }
        </script>
    </head>

    <body>
        <h3>
            Register
        </h3>
        <form>
            <p>
                Username
                <input type="text" id="username" />
            </p>
            <p>
                Password
                <input type="password" id="password" />
            </p>
            <p>
                Email
                <input type="email" id="email" />
            </p>
            <p>
                Interest
                <input type="text" id="interest" />
            </p>
            <p>
                <input type="submit" value="register" onclick="set();" />
            </p>
        </form>
    </body>

</html>

问题是每次我输入信息并单击注册按钮时，request.success都不起作用。也许我的描述不正确。谢谢你的时间来解决我的问题。

Answer 1

正如@Bergi在评论中所述，您没有阻止提交按钮的默认行为，该按钮会在您提交时重新加载页面。请参阅What happens when submit button is clicked。

你应该做的是在调用函数

时传递event参数

<input type="submit" value="register" onclick="set(event);" />

然后阻止set函数

中的事件默认行为

function set(e) {
    e.preventDefault();
    var db;
    var request;
    ...
    ...
    //// your code
}

将停止重新加载页面，这是表单提交按钮的默认行为。

输入信息时有关Javascript IndexedDB的问题

1 个答案: