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

【问题标题】：Exchange data between HTML page and Java servlet without page refreshing在不刷新页面的情况下在 HTML 页面和 Java servlet 之间交换数据
【发布时间】：2017-03-29 12:57:38
【问题描述】：

我想用 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()"/>

【问题讨论】：

检查 Ajax：w3schools.com/xml/ajax_intro.asp

标签： javascript java json servlets

【解决方案1】：

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

您可以在原版 Javascript 中完成此操作，但使用像 jQuery 这样的库更容易。代码看起来像这样（jQuery，注意'$'）：

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.                        
               }
    });
}

希望这能给你一个起点！

【讨论】：

【解决方案2】：

您必须使用 jquery AJAX。

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

希望对你有帮助。

【讨论】：