向 Express 发送 AJAX POST 请求答案

【问题标题】：Sending AJAX POST request to Express向 Express 发送 AJAX POST 请求
【发布时间】：2020-08-28 09:09:08
【问题描述】：

我有两个问题。第一个是，我不知道在使用 AJAX 发送 POST 请求时我做错了什么。我正在返回结果，但我发送的 userSrc 参数未定义。

如何发送参数以便 Express 可以使用 req.query 读取它并将其用作搜索参数？

代码如下：

jquery：

$(function() {
    
    $("#userSrc").keyup( function () {
        let dInput = $("#userSrc").val();
        console.log(dInput);
      $.ajax({

        type: 'POST',
        url: '/quicksearch',
        data : {userSrc :dInput},
        
        success: function(result) {
          let html = '';
          console.log(result);
          result.each(element =>{
            console.log(element);
            html += "<h2>" + element.Title +"</h2>";
            $("#result").html(html);
          });
          
          
        }
      });
    });
  });

快递：

app.post("/quicksearch", (req, res) => {
  let search = req.query.userSrc;
  console.log(search);

  Recent.findOne({
    Title: search
  }, (err, foundData) => {
    if (err || foundData == null) {
      fetch("http://www.omdbapi.com/?s=" + search + "&apikey=b322e698")
        .then(response => response.json())
        .then(data => {
          console.log("API RESPONSE");
          console.log(data.Search);
          res.send({
            result: data.Search
          });
        });
    } else {

      
      console.log("Found Local");
      res.send( {
        result: foundData
      });
    }
  });

我遇到的第二个问题是，自从我尝试使用 Object.keys 和 ForEach 以来，如何实现收到的结果。我不确定如何获得 result.Title。

{result: Array(7)}
    result: Array(7)
    0: {Title: "Undefined", Year: "2006", imdbID: "tt1436480", Type: "movie", Poster: "https://m.media-amazon.com/images/M/MV5BMTgzNzkxMzk5Nl5BMl5BanBnXkFtZTgwMTQ2MzA2MDE@._V1_SX300.jpg"}
    1: {Title: "The Undefined", Year: "2013", imdbID: "tt3271334", Type: "movie", Poster: "N/A"}
    2: {Title: "Viet Costas - Citizenship: Undefined", Year: "2014", imdbID: "tt3838986", Type: "movie", Poster: "N/A"}
    3: {Title: "A Love Undefined", Year: "2015", imdbID: "tt4955578", Type: "movie", Poster: "N/A"}
    4: {Title: "Artist Undefined", Year: "2015", imdbID: "tt5190590", Type: "movie", Poster: "N/A"}
    5: {Title: "Undefined", Year: "2014", imdbID: "tt5581814", Type: "movie", Poster: "N/A"}
    6: {Title: "Undefined: A Muslim-American Musical", Year: "2017", imdbID: "tt7178924", Type: "movie", Poster: "https://m.media-amazon.com/images/M/MV5BODMwYTE1ZG…jk0ZmZhXkEyXkFqcGdeQXVyNzI4NTUyNjE@._V1_SX300.jpg"}
    length: 7
    __proto__: Array(0)
    __proto__: Object

提前致谢！

【问题讨论】：

标签： javascript ajax express ejs

【解决方案1】：

快速处理程序正在获取 URL 中的 query parameters。这些是 URL 中 ? 之后的字符，例如，/quicksearch?search=text 然后 req.query 将是 { search: "text" }。

您想阅读request body。这可以通过req.body 完成。确保在您的 express 应用中添加 body-parser 中间件。包括中间件：

const bodyParser = require('body-parser');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
app.use(urlencodedParser);

现在在您的路由处理程序中，您可以访问req.body。

您的forEach 很好，但您似乎在错误的变量上执行此操作。在您的 JavaScript 中，result 包含您响应的整个正文。您的数组位于result.result。为你的 JavaScript 重写：

$(function() {
    $("#userSrc").keyup(function() {
        let dInput = $("#userSrc").val();
        console.log(dInput);
        $.ajax({
            type: 'POST',
            url: '/quicksearch',
            data: {
                userSrc: dInput
            },
            success: function(response) { // response is the whole body
                let html = '';
                console.log(response.result);
                response.result.each(element => {
                    console.log(element);
                    html += "<h2>" + element.Title + "</h2>";
                    $("#result").html(html);
                });
            }
        });
    });
});

【讨论】：