首页 > 解决方案 > 如何在express node.js中发送对ajax post请求的响应?[已回答]

问题描述

我正在做一个简单的项目来练习 node js 和 Jquery Ajax。所以我有一个 ajax 发布请求,它将一些数据发送到 nodejs 服务器并等待响应。在服务器端,我有一个读取数据并对其进行处理的代码。这工作正常。但是当我尝试将响应发送回 ajax 时,页面会发生变化,并以纯文本形式显示响应。我想要的是对 ajax 端的响应做一些事情。对不起,如果我不清楚,但希望您在阅读代码时理解。

jQuery Ajax 代码:

$("submitBtn").on("click", e=>{
        e.preventDefault();
        $.ajax({
            url: "/getCity",
            type: "POST",
            data: `city=${cityName}&country=${countryName}`,
            success: function(data){
                console.log(data);
            }
        });
    });

服务器端代码:

app.post("/getCity", (req, res)=>{
    //a promise
    .then(cityID=>{
        res.status(200).send(cityID.toString());
        });
});

html代码:

<form method="post" action="/getCity">
    <input/>
    <input/>
    <button id="submitBtn" type="submit">Search Weather</button>
</form>

method="post" action="/getCity"我包含了 html 代码,因为即使发出 ajax 发布请求,我也不知道是否需要放置。我希望你能帮我解决这个问题,如果可能的话 html 的事情。先感谢您。注意:这个问题是我之前提出的另一个问题的再现。我这样做是因为它被标记为重复,但在那之后它被另一个用户回答了,只是在评论中,他要求这样做是为了将来让其他人从中受益。

标签: javascriptjquerynode.jsajaxexpress

解决方案


请在您的 html 文件中按以下方式使用它。应该能解决你的问题

<body>
    <form method="post" id="cityform">
        <button id="submitBtn" type="submit">Search Weather</button>
    </form> 
</body>

<script>
    $("#cityform").submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "https://localhost:8443/getCity",
            type: "POST",
            data: {
                'city': 'pune',
                'country': 'India',
            },
            success: function(data){
                console.log(data);
            }
        });
    });

</script>

发布请求应该是这样的,我将一些函数称为 findCity,你不必使用它。

app.post("/getCity", (req, res) => {
    var cityname= req.body.city;
    var country= req.body.country;
    city.findCity(cityname, country).then((cityID) => {
        res.status(200).send({ cityID: '123' });
    }).catch((e) => {
        res.status(400).send(e);
    });
});

推荐阅读