Question

我正在做一个简单的项目，与Jquery Ajax一起练习节点js。因此，我有一个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>

我包含了html代码，因为即使发出ajax发布请求，我也不知道是否需要放置method="post" action="/getCity"。希望您对此有所帮助，如果可能的话，请帮我。先感谢您。注意：此问题是我之前提出的另一个问题的补充。我之所以这样做，是因为它被标记为重复项，但之后又由另一位用户回答，仅在评论中，他要求这样做是为了将来从中受益。

Answer 1

请按照以下说明在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);
    });
});

Answer 2

在重复文章中，他们讨论了DOM选择器如何在元素在页面上之前触发。那不是你的问题。您缺少选择器的＃部分（因为您是按ID进行选择的）。将您的AJAX的第一行更改为$（“＃submitBtn”）。on（“ click”，e => {，它将正常工作。因为这被错误地标记为重复项，因此我无法将其发布为如果此解决方案有效，请再次创建您的问题，提供我的评论作为答案，然后接受它，以便将来其他人可以从中受益。@ Welkie

如何在Express Node.js中发送对Ajax发布请求的响应？[已回答]

2 个答案: