基于javascript的数据库查询&；servlet

我试图通过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>

function showInfo（）{}//我想在这里发出请求
身份证：
进入

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

要做到这一点，您的

showInfo（）

函数应该做以下三件事中的一件（我不记得是哪一件）

返回false

取消事件，类似于

e.preventDefault（）

停止传播，例如

e.stopPropagation（）

---

一旦您成功阻止表单硬提交，您就可以通过AJAX提交数据并按照自己的意愿处理响应来完成您想做的事情。

1st-Jason完全正确，在这种情况下，您需要的是AJAX，下面是一个动态示例

第二，您应该使用一个Javascript库，比如，它可能看起来很吓人（就像一开始对我所做的那样），但它确实很容易，而且完全值得花一点力气来实现

第三，使用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>

---

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

哇，这个回复真的很有用。是的，我对JQuery有点熟悉，并且非常喜欢我对它所知甚少的东西。不幸的是，这段代码不起作用。它说“找不到localhost:8080”，尽管我可以在浏览器中调出它，但不要忘记您需要配置web.xml文件以访问servlet。这就是所谓的servlet映射，你可以通过谷歌找到它的例子。Servlet映射还将帮助您缩短AJAX请求中使用的url，因为您可以随意调用url。在您的情况下，url可能只是“/authenticate”。另外，如果你喜欢答案，请将其标记为已回答，或者至少投票，谢谢！欧文，谢谢你的建议。事实上，我现在一切都正常了。我在网上找到了这个小剪贴画，它正确地找到了servlet：$.get（“authenticate”），{badge:$（'input#badge'）.val（）}，函数（xml）{displayFamilyForeturn（xml）；}）；再次感谢所有的帮助！欢迎光临！你也可以投票或者接受我的答案，这让我可以在网站上做更多的事情，而不仅仅是普通的问答，谢谢。

// 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);