jQuery Ajax Post继续在URL上添加用户名和密码

Question

我正在使用jQWidgets上提到的“登录对话框”，我认为这不是我遇到的问题，因此，是否有人之前使用过它或是否用于回答我的问题都没有关系：

通过放置登录凭据来测试登录功能时，用户名和密码会不断添加到不需要的页面的URL上。 我不确定为什么会这样。 我对jQuery Ajax Post Webservice调用做错了吗？

举例来说，我的网络应用首页网址为： https://example.com/home.html : https://example.com/home.html

输入日志凭证后，由于某种原因，它会被添加到URL：

https://example.com/home.html?username=myname&password=mypassword

这是我的HTML：

<!-- Login HTML Begins -->
            <div id="wrap">

            <div id="window" caption="Login">
                <div>
                    <form >
                        <table>
                            <tr>
                                <td>Username:</td>
                                <td><input style="width: 150px;" type="text" name="user" id = "username" /></td>
                            </tr>
                            <tr>
                                <td>Password:</td>
                                <td><input style="width: 150px;" type="password" name="password" id = "password" /></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="right" valign="bottom">
                                    <input type="submit" id="submit" value="Login" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>

            <!-- Login HTML ends -->

这是我的Javascript代码：

<script type="text/javascript">
    $(document).ready(function () {
        $('#window').jqxWindow({ theme: "shinyblack", width: 250, height: 130, isModal: true });
        $('#submit').jqxButton({ theme: "shinyblack" });

      var loginUrl = "https://example.com:8443/Webservice/loginCheck"

 $( "#submit" ).click(function() {

                var userName = $("#username").val();
                 var passWord = $("#password").val();

                var ajaxRequest = jQuery.ajax({
                    //beforeSend: TODO: show spinner!
                    data: {
                        username: userName,
                        passWord: passWord 
                    },
                    dataType: "json",
                    method: "POST",
                    url: loginUrl
                })
                 .done(function (data_, textStatus_, jqXHR_) {

                // Validate the web service and retrieve the status.
                if (typeof (data_) === "undefined" || data_ === null) { alert("Invalid data returned from LoginCheck Web Service"); return false; }
                if (isEmpty(data_.webservice_status) || isEmpty(data_.webservice_status.status)) { alert("Invalid Web Service Status for LoginCheck Webservice!"); return false; }
                if (data_.webservice_status.status != "SUCCESS") {   alert(data_.webservice_status.message); 


                return false; }
            })

           .fail(function (jqXHR_, textStatus_, errorThrown_) {
                    alert("Hitting the Fail function : Error in LoginCheck webservice: " + errorThrown_);
                    return false;
                });


}




    });
</script>

Answer 1

表单使用的默认协议是GET，因此您需要使用POST协议覆盖它

所以你需要这样的东西：

<form action="url" method="post">
 ..
  ..
 ..
</form>

还有嵌入式点击功能，您应该通过放置以下代码来防止某些默认设置：

$("#submit").click(function(e){
  e.preventDefault();
  <!-- your statement !>
 ...
})

还有butto类型：

 <button type="button" id="submit"></button> 

要么

 <input type="button" id="submit">

Answer 2

设置方式是以传统方式而不是通过AJAX提交表单数据的。

一种选择是添加：

$('form').on('submit',function(event){
  event.preventDefault();
});

（一个常见的错误是试图阻止在提交按钮附带的单击处理程序中提交表单。有多种提交表单的方法，而提交按钮只是其中的一种。）

另一种选择是仅删除form元素。

Answer 3

您的表单可能正在发送获取请求，因为您尚未阻止表单按钮的默认功能。 尝试将这两行添加到点击处理程序中：

$( "#submit" ).click(function(event) {
 event.preventDefault();
  event.stopPropagation();
}