jQuery $ .post和$ .ajax POST请求不适用于Express中的app.post()方法
我需要将数据从Express应用程序的前端发送到后端,然后使用需要显示该数据的EJS呈现页面。
问题是app.post()
方法,当我通过$.post
或$.ajax
发出“手动”POST请求时, res.render()
函数似乎没有完全或正确执行
假设我通过JQuery发出这个POST请求
$.post("/test", { testData: 'Some test data.' });
或者通过AJAX发出POST请求
$.ajax({ type: 'POST', data: { testData: 'Some test data here.' }), url: '/test', })
我配置我的app.post()方法来处理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
,所以那里没有问题。
问题在于res.render()
函数,如果POST
请求是通过$.post
或通过AJAX $.ajax
,它根本不起作用。 res.render()函数不会通过$.post
或$.ajax
发出的POST请求执行或呈现页面。
奇怪的是,如果通过表单执行相同的POST
请求(我不希望在我的应用程序中执行,因为POST
请求不应该发送从输入接收的数据),使用EXACT相同的app.post()
路由处理程序表达完美。
例如,使用类似下面的表单工作并允许res.render()
显示页面,而$.post()
和$.ajax
方法不允许。 为什么会这样?
我发现StackOverflow上的另一个问题与我的非常相似,但除了表单选项(我不能使用)之外没有明确的解决方法: Express.js不会在Post Action中渲染
有什么建议?
使用Ajax的关键是HTTP响应返回给JavaScript并且不替换整个页面。
如果要加载新页面,请不要使用Ajax。 使用表格。
如果要在JavaScript中处理响应,则需要为其添加处理程序。
$.post("/test", { testData: 'Some test data.' }).done(function( data, textStatus, jqXHR ) { // Do something smarter than alert(data); });
正如其他人所指出的那样,jQuery .post,.ajax等不期望重定向,它期望JSON,所以这不起作用。 但是,您可以通过一些简单的JavaScript获得您正在寻找的效果。 这就是我遇到类似问题时的方法:
首先,我创建了一个URL字符串,将我想要传递给服务器的数据作为查询参数附加
var urlString = 'http://hostaddress/myRoute?data1='+myData1+'data2='myData2;
其次,我做了一个window.location.replace,如下所示:
window.location.replace(urlString);
第三,我在Express中创建了一个GET路由来处理传入的请求:
app.get('/myRoute', function(req,res){ var myData1 = req.query.data1; var myData2 = req.query.data2; res.render('myView',{data1:myData1,data2:myData2});
希望有所帮助。
我遇到了同样的问题,并在不使用$ .post或$ .ajax的情况下解决了这个问题。 首先,我从表单元素中取出按钮:
并且我将发布表单条件绑定到单击按钮事件。 我也可以发布我想要的价值。 例如:
$(".btn").click(function(){ if($(".form-control").val() ){ $(".form-control").val("Desired Value"); $("#form-test").submit(); }else alert("TestData is empty"); });