запрос к базе данных через JavaScript и сервлет

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

1-й - Джейсон абсолютно прав, что в этой ситуации вам нужен AJAX, ниже приведен пример в движении.

2-й - вам следует использовать библиотеку Javascript, например jQuery , что может показаться пугающим (как это было поначалу для меня), но это действительно легко и полностью стоит небольших усилий, чтобы начать работу.

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 требует определенных усилий, чтобы получить желаемый эффект, но когдаВы смотрите на время загрузки страницы, номера запросов и т. д. Это того стоит.Пожалуйста, дайте мне знать, если это было полезно, и если вам нужны какие-либо подробности.

Answer 2

Я предполагаю, что вы на самом деле отправляете форму, которая отправляется обратно на сервер. Что вы хотите сделать, это отменить отправку формы и отправить ее с помощью AJAX (что, я полагаю, вам нужно?).

Для этого ваша функция showInfo() должна выполнять одно из этих трех действий (я не могу вспомнить, какое именно)

1. return false;
2. отменить событие, что-то вроде e.preventDefault()
3. остановить распространение, что-то вроде e.stopPropagation()

Как только вы успешно предотвратили жесткую отправку формы, вы можете делать то, что хотите, отправляя свои данные через AJAX и манипулируя вашим ответом так, как вам нравится.