【问题标题】:node.js/express making post request without redirecting from current pagenode.js/express 在不从当前页面重定向的情况下发出发布请求
【发布时间】:2014-08-03 07:00:28
【问题描述】:

我有一个 node.js express 应用程序,它试图发出一个 post 请求并查询数据库的内容。我正在尝试执行发布请求,而不必从表单页面重定向用户或重新加载页面。

index.jade

form.well(id="newEntryForm", method="post", action="/addEntry")
    label Key:
    br
    input(name="key", id="key", class="new-entry", type="textbox")
    br
    br
    label Value:
    br
    input(name="value", id="value", class="new-entry", type="textbox")
    br
    br
    button.btn(type="submit") Add Entry

app.js

app.post('/addEntry', function(req, res){
   //database query
});

这最终将我重定向到 URL localhost:3000/addEntry。我知道我可以在 post 方法的回调中添加res.redirect("/");,但这会重新加载页面。如何在不重新加载页面的情况下完成此操作?

编辑

我添加了一个 javascript 方法来在提交表单时执行,但它最终在 URL 栏上附加了 POST 请求参数。我该如何避免这种情况?

Javascript 方法

$(function() {
    $('#newEntryForm').submit(function() {
        var data = {key: 'a', value: 'b'};
        // build a json object or do something with the form, store in data
        $.post('/addRule', data, function(resp) {
            alert(resp);
            console.log("post response: " + resp);
            // do something when it was successful
        });
    });
});

【问题讨论】:

  • 您需要使用客户端Javascript和AJAX。
  • 我试过这样做。我在提交表单时执行 javascript 方法时遇到了一些问题,当我提交表单时,发布请求信息被附加到 URL 中。你能举个例子吗?

标签: javascript jquery node.js post express


【解决方案1】:

正如评论所说,您需要使用客户端 javascript+ajax。

$(function() {
    $('#newEntryForm').submit(function(event) {
        event.preventDefault(); // Stops browser from navigating away from page
        var data;
        // build a json object or do something with the form, store in data
        $.post('/addEntry', data, function(resp) {
            alert(resp);
            // do something when it was successful
        });
    });
});

【讨论】:

  • 如何获取帖子的数据?有没有办法将值作为 JSON 对象获取?
  • 我试过了,现在我的url包含了POST请求的参数。我已将我的更改添加到问题中。是否可以保留在索引页面中?
  • 就做类似var data = { key: $('#key').value(), ... }
猜你喜欢
  • 2016-02-10
  • 1970-01-01
  • 2019-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多