Javascript 如何使用ajax和node从表单获取请求

我将Node.js与我的web应用程序的express框架一起使用。我试图做的是在点击按钮后从客户端index.js获取输入，并根据该参数从我的route app.js请求信息以显示在我的索引页面上。我尝试使用ajax向我的路线发出请求，但它不起作用。我知道URL查询字符串有问题，但不太确定如何修复。如果我需要进一步澄清，请告诉我。提前谢谢

index.ejs

script.js

routes.js

解决方案 对于遇到相同问题的人，这里有一个解决方案：

script.js

---

问题是，您使用的是输入类型submit。提交页面并显示发送的回执。有几种方法可以解决这个问题

第一种解决方法是将提交类型更改为简单按钮类型。 第二种方法是使用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()       
 });
});`

---

看起来您依赖于req.query.userName，但从未将该值放入script.js中的查询字符串中。格式为。您的示例缺少=。重要的是要分别测试每一侧，即，如果您可以访问GEThttp://localhost:8080/json?userName=asd 成功地使用CURL、POSTman或其他工具，您完全可以忘记节点。jquery也是如此，您可以针对模拟XHR（即superspy）进行测试，以检查客户端代码是否执行了它应该执行的操作。我认为@JeremyPridemore是对的，这里有两个问题：一个是缺少参数，您可以在这里添加'userName='+form.userName。第二个问题是，正如下面的答案所指出的，您需要使用event.preventDefault或返回false来防止浏览器的默认行为。@carlosE。为了在使用AJAX的同一页面上获取数据，我想指出的是，您可以将客户机代码和服务器代码视为两个真正独立和独立的东西，否则您将进入脑海中的意大利面领域；。很高兴您可以访问/json/userName=carlos，从而获得一个纯json页面，这告诉您，嘿，节点不是问题所在谢谢您帮助我获得解决方案。我通过使用event.preventDefault以及在URL中为查询字符串添加参数得到了答案http://localhost:8080/json?userName= +用户名。

$(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",
    });           
});
});

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
        });
    });
});
}

$(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",
    });           
});
});

`$(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()       
 });
});`