Question

我想用HTML和Java（也许是JSON）创建一个简单的登录表单。所以，我有一个带有几个输入字段的登录表单，其中包含以下id-s：txtUsername，txtPasswd，btnLogin。在单击按钮（btnLogin）之后，我想将数据发送到servlet，并返回一个真/假值，深入到user-passwd组合。我可以编写此表单的HTML代码和服务器端代码，但我不知道如何在没有页面刷新的情况下发送和回收数据。

这是我的前端代码：

<script>
   function login(){
       var user=document.getElementById("txtUsername");
       var passwd=document.getElementById("txtPasswd");
         //???
   }
</script>


Username: <input type="text" id="txtUsername"/> <br/>
Password: <input type="password" id="txtPasswd"/> <br/>
<input type="button" value="Login" id="btnLogin" onclick="login()"/>

Answer 1

您必须使用AJAX请求。一种方法是在login按钮（如onclick）上连接和事件处理程序，该按钮调用JS函数以使用Ajax请求（XmlHttpRequest ），就像你已经开始。

您可以在vanilla Javascript中执行此操作，但使用像jQuery这样的库会更容易。代码看起来像这样（使用jQuery，请注意＆＃39; $＆＃39;）：

function login() {
    $.ajax({
        type: 'POST',
        url: url, //Url of login endpoint
        data: DATA, //Now here you would want to send a payload i.e. your username and password data
        dataType: 'json',
        contentType: 'application/.json',
        success: function(data) { 
                    //HERE 'data' would represent your true or false that came back from the server. 
                    //You can do stuff here with the response
                 },
        error: function(jqXHR, textStatus, errorThrown) {
                    //IF ERROR then this code would be executed.                        
               }
    });
}

希望这能为您提供一个起点！

Answer 2

您必须使用jquery AJAX。

以下是官方文档的链接：http://api.jquery.com/jquery.ajax/

希望它有所帮助。

在不刷新页面的情况下在HTML页面和Java servlet之间交换数据

2 个答案: