Question

我试图为我的Windows 8应用程序创建一个登录页面，我正在使用Html5和javascript ..所以试图使用winjs.xhr将文本框中的内容作为变量发布到特定的URL，这是一个PHP脚本所以这是我的网址“http://example.com/api/username=username&password=password”的示例，我使用winjs.xhr将这些变量发布到网址，但即使在console.log中也没有得到任何响应。

这是我的代码

<script>
function handlelogin(){
    document.getElementById("box").onsubmit = function(){
        if(document.getElementById("email_address").value ==""){
            document.getElementById("errormessage").innerHTML= "Please Provide Your Email Address";
            return false;
        }else{
            var email_address = document.getElementById("email_address");
            var password = document.getElementById("password");
            var formparams = "?username=" + email_address.value + "&password=" + password.value;
            document.getElementById("errormessage").innerHTML = "";
            WinJS.xhr({type: "POST",
                        url: "http://example.com/api/",
                        data: formparams,
                        headers: { "Content-type": "application/x-www-form-urlencoded" }
                        }).then(
                            function (success) {
                                console.log(success.statusText);
                                if(success == 1703){
                                    WinJS.Navigation.navigate("home.html");
                                }
                            },
                            function (error) {
                                console.log(error);
                            }
                        );
        }
    };
}
window.onload = function () {
    handlelogin();
}
</script>


<form id="box" method="post" name="loginform">
            <p>Email address</p>
            <div class="email_address"><input type="text" id="email_address" /></div>
            <p>Password</p>
            <div class="password"><input type="password" id="password" /></div>
            <p><span id="errormessage"></span></p>
            <div class="button"><input type="submit" id="login" value="Sign In"/></div>
            <p>ForgotPassword?</p>
        </form>

Answer 1

首先 - 不要使用提交按钮。使用输入类型=＆＃34;按钮＆＃34;。无需提交，您只需阅读页面上的值。

第二 - 附加按钮的点击事件的事件处理程序。这样做＆＃39; onload＆＃39;因为窗户不是正确的地方。

第三 - 不要使用＆＃39; onsubmit＆＃39;为你的盒子＆＃39;元件。此处没有表单提交。通常不应该是WinJS中的表单提交 - 用于将页面发布到服务器的浏览器。您已经在发布数据了。请参阅更新的代码：

我强烈建议将所有javascript放入单独的文件中，因为您将以这种方式获得字节码优化。内联Javascript未针对下一次加载进行优化。一种常见的方法是在js文件中包含下面的onload代码（我指定onclick），如下所示

app.onactivated = function (args) {
  ..
  ..
  ..

   args.setPromise(WinJS.UI.processAll().then(function () {
     document.getElementById("login").onclick = handlelogin;
  }));

  ..
  ..
  }
};

但直接针对上述问题的答案是：

<script>
function handlelogin() {
    if (document.getElementById("email_address").value == "") {
        document.getElementById("errormessage").innerHTML = "Please Provide Your Email Address";
        return false;
    } else {
        var email_address = document.getElementById("email_address");
        var password = document.getElementById("password");
        var formparams = "?username=" + email_address.value + "&password=" + password.value;
        document.getElementById("errormessage").innerHTML = "";
        WinJS.xhr({
            type: "POST",
            url: "http://example.com/api/&quot;,
            data: formparams,
            headers: { "Content-type": "application/x-www-form-urlencoded" }
        }).then(
            function (success) {
                console.log(success.statusText);
                if (success == 1703) {
                    WinJS.Navigation.navigate("home.html");
                }
            },
                function (error) {
                    console.log(error);
                }
        );
    }
}

window.onload = function() {
    document.getElementById("login").onclick = handlelogin;
};
</script>

查看App Builder中讨论JavaScript项目http://aka.ms/stackbuilder

的部分会话

使用WinJS.xhr将变量发布到URL

1 个答案: