從html頁面到服務器的Ajax請求不起作用

Question

我使用module Express在NodeJs上創建了一個服務器。現在我想通過點擊一個按鈕來實現從頁面$.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; 

這是我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，以防止重新加載頁面。