从 html 页面到服务器的 Ajax 请求不起作用

Question

我使用模块 Express 在 NodeJs 上创建了一个服务器。现在我想通过单击一个按钮来实现来自带有$.ajax 的html页面的请求。我想从服务器获取json格式或者文本格式的数据，没关系，但是不行。为什么？
另外，为什么 ajax 请求不应该重新加载 html 页面？
服务器部分：

var express = require('express');
var fs = require('fs');
var request = require('request');
var cheerio = require('cheerio');
var app = express();
var url = require("url");
app.get('/scrape', function (req, res) {
    console.log("Someone made request");
    url = 'http://spun.fkpkzs.ru/Level/Gorny';
    request(url, function (error, response, html) {
        if (!error) {
            console.log("Inside request");
            var $ = cheerio.load(html);
            var date, waterlevel;
            var json = {
                time: "",
                waterlevel: ""
            };
            json.time = $("#waterleveltable td.timestampvalue").first().text()
            json.waterlevel = $("#waterleveltable td.value").first().text()
            res.send(json);
            console.log(json);
        }
    })
})
app.listen('8081')
console.log('Server started on port 8081');
exports = module.exports = app;

这是我的 HMLT 请求：

<form>
    <!--       button for sending a request to server-->
    <button id="button12">Scrape water height</button>
</form>
<div id="response21">
    Print
    <!--     div for displaying the response from server   -->
</div>
<p id="p1">___!</p>
<script>
    $(document).ready(function () {
        $("#button12").click(function () {
            console.log("Get sent.")
                // Json request    
            $.get("http://localhost:8081/scrape", function (data) 
            {
                console.log("Data recieved" + data);
                $("#response21")
                    .append("Time: " + data.time)
                    .append("Waterlevel: " + data.waterlevel);
            }, "json");
        });
    });

Answer 1

由于您的按钮位于表单内，因此单击按钮的默认操作将是加载新页面。这就是导致页面重新加载的原因。

您可以做的最简单的事情是在点击处理程序回调结束时添加return false，以防止重新加载页面。