jQuery $ .post和$ .ajax POST请求不适用于Express中的app.post()方法 [英] jQuery $.post and $.ajax POST requests don't work with app.post() method in Express

问题描述

我需要将数据从Express应用程序的前端发送到后端，然后使用需要显示该数据的EJS渲染页面.

问题是app.post()方法，随后当我通过$.post或res.render()函数似乎无法完全或正确执行>

The problem is the app.post() method, and subsequently the res.render() function do not seem to execute fully or properly when I make a "manual" POST request via $.post or $.ajax

假设我通过JQuery发出了POST请求

Suppose I make this POST request via JQuery

$.post("/test", {
  testData: 'Some test data.'
});

或者通过AJAX发送此POST请求

Or this POST request via AJAX

$.ajax({
  type: 'POST',
  data: {
    testData: 'Some test data here.'
  }),
  url: '/test',
 })

然后我将我的app.post()方法配置为在Express中处理该路由

And I configure my app.post() method to handle that route in Express

app.post('/test', function(req, res) {
  res.render('./test.ejs', {
    testMessage: req.body.testData
  });
});

变量testData将通过app.post()方法发送和接收.所以说如果我这样做:console.log(req.body.testData)，输出将是Some test data，所以那里没有问题.

The variable testData will be sent through and received by the app.post() method. So say if I did this: console.log(req.body.testData), the output would be Some test data, so there's no problem there.

问题出在res.render()函数上，如果通过$.post或通过AJAX $.ajax发出POST请求，它根本根本不起作用. res.render()函数不会通过通过$.post或$.ajax发出的POST请求执行或呈现页面.

The problem is with the res.render() function, it simply doesn't work at all if the POST request is made through $.post or via AJAX$.ajax. The res.render() function does not execute or render the page through POST requests made through $.post or $.ajax.

奇怪的是，如果通过表单执行了相同的POST请求(我不想在我的应用程序中这样做，因为POST请求不应该发送从输入接收的数据)，请使用完全与Express中的app.post()路由处理程序完全一样.

Strangely, if did the same POST request via a form (which I do not want to do in my application because the POST request is not supposed to send data received from an input), with the EXACT same app.post() route handler in Express it works perfectly.

例如，使用下面的格式可以使res.render()显示页面，而$.post()和$.ajax方法则无效.为什么会这样?

For example, using a form like the one below works and allows res.render() to display the page, whereas the $.post() and $.ajax methods do not. Why is that so?

<form id="form-test" role="form" action="/test" method="post">
  <input type="text" name="testData" placeholder="Test Data Goes Here" class="form-control" required>
  <button class="btn" type="submit">Submit</button>
</form>

我在StackOverflow上发现了另一个与我的问题极为相似的问题，但是除了form选项(我无法使用)以外，没有其他明确的解决方法:

I've found another question on StackOverflow extremely similar to mine, but with no clear workaround other than the form option (which I cannot use) : Express.js Won't Render in Post Action

有什么建议吗?

推荐答案

正如其他人指出的那样，jQuery .post，.ajax等不希望重定向，它需要JSON，因此不起作用.但是，您可以通过一些简单的JavaScript来获得所需的效果.这是我遇到类似问题时的解决方法:

As others have pointed out, jQuery .post, .ajax, etc doesn't expect a redirect, it expects JSON, so that doesn't work. However, you can get the effect you're looking for with some easy JavaScript. This is how I did it when I had a similar problem:

首先，我创建了一个URL字符串，将要传递给服务器的数据作为查询参数附加

First, I created a URL string, appending the data I wanted to pass to the server as query parameters

var urlString = 'http://hostaddress/myRoute?data1='+myData1+'data2='myData2;

第二，我像这样做了一个window.location.replace:

Second, I did a window.location.replace like so:

window.location.replace(urlString);

第三，我在Express中创建了一条GET路由来处理传入的请求:

Third, I made a GET route in Express to handle the incoming request:

app.get('/myRoute', function(req,res){
var myData1 = req.query.data1;
var myData2 = req.query.data2;
res.render('myView',{data1:myData1,data2:myData2});

希望有帮助.

这篇关于jQuery $ .post和$ .ajax POST请求不适用于Express中的app.post()方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！