从html页面向服务器发出的Ajax请求不起作用

Ajax request to server from html page doesn't work

本文关键字:Ajax 请求 不起作用 服务器 html      更新时间:2023-09-26

我用模块Express在NodeJs上做了一个服务器。现在我想实现一个请求从html页面与$.ajax点击一个按钮。我想从服务器获得数据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;

<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");
        });
    });

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

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