在html中用节点搜索mysql数据库

z18hc3ub  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(261)

我连接了一个数据库到节点,并试图创建一个html页面来搜索数据库。我宁愿不用ejs。我想我必须在htmlajax中使用post请求,并将其与node中的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发送到服务器,并用它搜索我的数据库。现在它返回一个空对象。谢谢你的帮助。

zynd9foi

zynd9foi1#

您需要对节点服务器进行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调用的更多详细信息,请参阅本网站
我已经修改了代码。

相关问题