javascript - 如何使用 ajax 和 Node 从表单中获取请求

Question

我将 Node.js 与 express 框架一起用于我的 Web 应用程序。我想做的是在单击按钮后从客户端 (index.js) 获取输入，并从我的路由 (app.js) 请求信息关闭该参数以显示在我的索引页面上。我尝试使用 ajax 向我的路线发出请求，但它不起作用。我知道我对 URL 查询字符串做错了，但不太确定如何修复它。让我知道是否需要进一步澄清。提前致谢。

index.ejs

<form action="" id="searchForm">
    <!-- Input box-->
    <input type="text" id="userName" name="userName">
    <!-- Submit button-->
    <input type="submit" value="Click Me">
</form>

script.js

$(document).ready(function () {    
// When the search Button is clicked run function
$("#searchForm").submit(function () {
    // Make a ajax request to a route
    $.ajax({
        // Connect to /json route
        url: "http://localhost:8080/json",
        contentType: "application/json",
        dataType: 'json',
        // If there is no errors run my function
        success: function (data) {
            //Writes the data to a table
            var table = "";
            for (var i in data) {
                table += "<tr><td>" + data[i] + "</td></tr>";
            }
        },
        // If there is any errors, show me.
        error: function () {
            alert('Oops, there seems to be an error!');
        },
        type: "GET",
    });           
});
});

routes.js

module.exports = function (app){
    app.get('/', function (req, res) {
        res.render('index.ejs'); //load the page
    });

app.get('/json', function (req, res) {
        var SomeQuery = "SELECT * FROM table WHERE user LIKE '%" + req.query.userName+ "%';
        client.query(SomeQuery, function (err, results) {
            if (err) throw err; //Show any errors
            var data = [];
            // Loop through all known data
            for (var i = 0; i < results.rows.length; i++) {
                data.push(results.rows[i]); //Push any information into empty array
            }
            res.json(data); //send it to make an ajax request
        });
    });
});
}

解决方案对于遇到同样问题的任何人，这里是修复:

script.js

$(document).ready(function () {    
// When the search Button is clicked run function
$("#searchForm").submit(function () {
    // Make a ajax request to a route
    //Value from input
    var userNameID = $("#username").val();
    $.ajax({
        // Connect to /json route
        url: "http://localhost:8080/json?userName=" + userNameID,
        contentType: "application/json",
        dataType: 'json',
        // If there is no errors run my function
        success: function (data) {
            //Writes the data to a table
            var table = "";
            for (var i in data) {
                table += "<tr><td>" + data[i] + "</td></tr>";
            }
        },
        // If there is any errors, show me.
        error: function () {
            alert('Oops, there seems to be an error!');
        },
        type: "GET",
    });           
});
});

Answer 1

问题是，您使用输入类型提交。提交 realod 页面并显示返回的页面。有几种解决方法։

1. 第一种解决方法，将提交类型更改为简单的按钮类型。

2. 第二种方法是使用 event.preventDefault() 停止默认浏览器行为

   `$(document).ready(function () {    
   // When the search Button is clicked run function
   $("#searchForm").submit(function (event) {
     // Make a ajax request to a route
     $.ajax({
       // Connect to /json route
       url: "http://localhost:8080/json",
       contentType: "application/json",
       dataType: 'json',
       // If there is no errors run my function
       success: function (data) {
           //Writes the data to a table
           var table = "";
           for (var i in data) {
               table += "<tr><td>" + data[i] + "</td></tr>";
           }
       },
       // If there is any errors, show me.
       error: function () {
           alert('Oops, there seems to be an error!');
       },
       type: "GET",
     });   
     event.preventDefault()       
    });
   });`