通过 javascript 和 servlet 进行数据库查询

Question

我正在尝试通过 html 页面对数据库中的信息进行简单查询。我已经让所有后端工作正常，但我在客户端遇到了麻烦。我目前有一个表格，用户可以在其中提交他们的 ID# 以获取有关他们案件的一些信息。

但是对于我当前的设置，它返回一个全新的页面，我只想读取一个文本字符串，处理它并更新当前 html 页面上的内容，而不打开新页面并替换旧页面。如何做到这一点？

到目前为止，这是我的代码：

function showInfo() { } // I want to make the request here instead

<form name="register" action="http://localhost:8080/testapp/authenticate" method="get">
      <p><label for="badge">ID #:</label>
         <input id="badge" name="ID" type="text" pattern="[0-9]{6}"
                placeholder="xxxxxx">
         <button id="checkButton" type="submit" onClick="showInfo()">Enter</button>   
      </p>
    </form>

Answer 1

我的猜测是您实际上是在提交表单，该表单正在发回服务器。您想要做的是取消提交表单并使用 AJAX 提交（我相信这是您想要的？）。

为此，您的 showInfo() 函数应该执行以下三件事之一（我永远记不得是哪一件事）

1. return false;
2. 取消活动，例如e.preventDefault()
3. 停止传播，例如e.stopPropagation()

一旦您成功阻止了表单的硬提交，您就可以通过 AJAX 提交您的数据并根据您的喜好操纵您的回复来做您想做的事情。

Answer 2

第一个 - Jason 是绝对正确的，你在这种情况下想要的是 AJAX，下面是一个正在运行的示例。

第二个 - 您应该使用诸如 jQuery 之类的 Javascript 库，这可能看起来很吓人（就像一开始对我所做的那样），但它真的很容易并且完全值得花一点点努力来实现它。

3 - 使用 jQuery，您的应用程序花絮应该看起来像这样，使用您提供的示例：

HTML -

    <p>
        <label for="badge">ID #:</label>
        <input id="badge" name="ID" type="text" pattern="[0-9]{6}"
            placeholder="xxxxxx">
        // Please note that I removed the onClick section from the line below.
        <button id="checkButton" type="button">Enter</button>   
    </p>

JQUERY -

// The default function you described to take information and display it.
function showInfo(data) {
    // Insert your function here, probably using JSON as the Content Type
}

// This is the key AJAX function, using jQuery, that takes your info and gets a    
// response from the server side, the sends it to the function above in order for it 
// to be displayed on the page.
function processIdInfoCheck() {
    $.ajax({
        type: 'post',
        url: '/http://localhost:8080/testapp/authenticate',
        data: { 
           'id': $('#badge').val();
        },
        dataType: 'json',
        success: displayIdInfoReturn,
        error: function () {
            alert("There was an error processing your request, please try again");
        }
    });
}

// When the page loads, the code below will trigger, and bind your button click        
// with the action you want, namely triggering the AJAX function above
(function ($) { 

    $('#checkButton').bind('click', processIdInfoCheck);

})(jQuery);

请记住，AJAX 需要付出一些努力才能获得所需的效果，但是当您查看页面加载时间、请求数量等时……这是完全值得的。请让我知道这是否有帮助，如果您需要任何细节。