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()函数应执行以下三项操作之一（我永远不会记住哪一项）

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

一旦您成功阻止表单难以提交，您就可以通过AJAX提交数据并根据需要操纵您的响应来执行您想要的操作。

Answer 2

1st - Jason绝对正确，你想要的是这种情况是AJAX，下面是一个动态的例子。

第二 - 你应该使用一个Javascript库，例如jQuery，它可能看起来很吓人（就像它最初对我一样），但它真的很容易并且完全值得花费很少的努力来实现它。

第三 - 使用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需要一些努力才能获得理想的效果，但是当你查看页面加载时间，请求数字等时......这是完全值得的。如果您需要任何具体信息，请告诉我。

数据库查询通过javascript＆amp;的servlet

2 个答案: