Поиск в базе данных MySQL с узлом в HTML

Question

Я подключил базу данных к узлу и пытаюсь создать страницу HTML для поиска в базе данных.Я бы предпочел не использовать EJS.Я думаю, что мне нужно использовать запрос POST в HTML AJAX и связать его с запросом POST в узле.

Вот что я думаю:

app.post("/cities/:city", function(req, res) {
    db.hospitalinfo.findAll({
        where: { city: req.params.city }
    }).then(function (result) {
        res.json(result);
        console.log("res--->"+result);
        console.log("req--->"+req.params.city);
    });
});

Вот HTML:

<form id="author-form" method="POST">
      <select id ="dropDownId">
          <option value="Opp" >Opp</option>
          <option value="Boaz">Boaz</option>
      </select>
      <input class="SubmitButton" type="submit"  id="click" style="font-size:20px;" />
</form>

Теперь вот где я застрял.Мне нужно получить значение из оператора select:

var nameInput = $("#dropDownId :selected");

Я не знаю, как на самом деле отправить nameInput на URL, чтобы сработало мое сообщение post.Я, наверное, не совсем понимаю, как работают эти маршруты.Это мой первый проект сам.Я хотел бы получить nameInput, отправить его на сервер через AJAX и выполнить поиск по моей базе данных.Прямо сейчас он возвращает пустой объект.Спасибо за вашу помощь.

Answer 1

Вам нужно сделать Ajax-вызов на сервер узла.Для этого вам нужно остановить отправку формы по умолчанию.

event.preventDefault();

может использоваться для остановки обычного процесса отправки формы.

Вот пример вызова ajax

(document).ready(function() {
    // process the form
    $('form').submit(function(event) {
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
        };

        // process the form
        $.ajax({
              type: "GET", // define the type of HTTP verb we want to use (POST for our form)
              url: "http://localhost:5000/example" // the url where we want to POST
              data: formData,
              dataType: 'json', // what type of data do we expect back from the server 
              success: function (data) {
                    console.log(data.result);
                    // perform required changes
                  },
              error: function (err) {
                    console.log(err);
                  }          
               });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});

, на который вы можете ссылаться на этот сайтподробнее совершение вызовов ajax

Я изменил код, взятый оттуда.