个人中心
gpt4 book ai didi

javascript - Node 如何操作 HTML DOM - 文档未找到错误

转载 作者：行者123 更新时间：2023-11-28 03:02:59 25 4
gpt4 key购买 nike

我有一个节点服务器，可以提供各种不同的 HTML 页面。其中一页中有一个表格。单击表单时，节点 server.js 文件中的端点将使用表单数据。同一个 HTML 页面包含一个

元素，我想在提交表单时修改其文本内容。我在网上看到了各种教程，展示了如何使用 document.getElementById('predictionText').innerHTML = Prediction; 使用内联 JavaScript 动态设置文本的值。如何使用 Node 和外部 js 实现此目的？

下面是我的代码:

<!DOCTYPE html>

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body class="bodyContent">
    <p>This is the predictor page -- it will hold a form for the user to input relevant data to.</p>
    <section class="active" id="navigationBarSection">
      <ul>
        <li><a href="index">Home</a></li>
        <li><a href="predictor">Predictor</a></li>
        <li><a href="how_it_works">How it Works</a></li>
        <li><a href="about_us">About Us</a></li>
      </ul>
    </section>

    <section id="predictorUserInputSection">
    <form action="/post_data_to_predictor_algorithm" method="POST" id="attributeInputForm">
      <input class="textInput" required name="averageAreaIncome" placeholder="Average Area Income" />
      <input class="textInput" required name="averageAreaNumberOfRooms" placeholder="Average Area Number of Rooms" />
      <input class="textInput" required name="averageAreaHouseAge" placeholder="Average Area House Age" />
      <input class="textInput" required name="averageAreaNumberOfBedrooms" placeholder="Average Area Number of Bedrooms"/>
      <input class="textInput" required name="areaPopulation" placeholder="Area Population"/>
      <button id="submitButton">Submit</button>
    </form>
  </section>

  <section id="predictionResultsSection">
    <p id="predictionText"><font size="6">here </p>
  </section>

  <script src="server.js"></script>
  </body>

</html>

应更新文本的节点服务器:

//jshint esversion:8

//adding all required dependencies/packages
const express = require('express');
const path = require('path');
const fs = require("fs");
const bodyParser = require('body-parser'); //for parsing post requests
const request = require('request') //for making HTTP requests

//specifies that this app will be using express.
const app = express();

//middleware for processing POST requests a bit easier.
app.use(bodyParser.urlencoded({extended: false}));

//static AWS EC2 instance server port. Edit with caution.
const serverPort = 5001;

const FLASK_SERVER_LOCAL_ENDPOINT = "http://localhost:5000/predictPrice";

//Allow the use of static files in project directory
app.use('/js', express.static(__dirname + '/js'));
app.use('/html', express.static(__dirname + '/html'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/node_modules', express.static(__dirname + '/node_modules'));
app.use('/resources', express.static(__dirname + '/resources'));

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;


//Handle all root requests.
app.get("/", function(req, res) {
  res.sendFile(path.resolve("index.html"));
});

app.get("/index", function(req, res) {
  res.sendFile(path.resolve("index.html"));
});

app.get("/predictor", function(req, res) {
  res.sendFile(path.resolve("html/predictor.html"));
});

app.get("/how_it_works", function(req, res) {
  res.sendFile(path.resolve("html/how_it_works.html"));
});

app.get("/about_us", function(req, res) {
  res.sendFile(path.resolve("html/about_us.html"))
});


//HERE IS THE PROBLEM
app.post("/post_data_to_predictor_algorithm", (req, res) => {
  //update prediction label in the UI:
  console.log("Updating label!");
  document.getElementById('predictionText').innerHTML = "received user response!";
});

运行服务器时，提交表单时出现以下错误:

ReferenceError: document is not defined
    at app.post (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/server.js:90:3)
    at Layer.handle [as handle_request] (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/layer.js:95:5)
    at /Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/express/lib/router/index.js:275:10)
    at /Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/body-parser/lib/read.js:130:5
    at invokeCallback (/Users/vismarkjuarez/Documents/Github/RealEstatePriceEstimator/node_modules/raw-body/index.js:224:16)

最佳答案

如果你想在表单的同一页面中更新 DOM 元素，你必须构建一个动态表单，因为带有 action="/destination"的标准表单会将你带到一个新页面，或者重建一个你不能的现有页面写在文档上，因为节点不知道 DOM。您需要 Jquery 或直接使用 xhr。例如:

// Build a single field dynamic Form:

<div id="myForm">
  <input type="text" id="textA"></input>
  <button type="submit" onclick="getElements()"> Submit </button>
</div>


// The element that need be updated.

<section id="predictionResultsSection">
   <p id="predictionText"><font size="6">here </p>
</section>


// Get the "form" field value.

function getElements() {
    var tA = document.getElementById("textA");
    formSubmit(tA.value)
}


// Do the request 

function formSubmit(sendData) {

  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "http://localhost/post_data_to_predictor_algorithm");
  xhttp.send(sendData);

  // Receive the response from server on this.responseText var
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {

    document.getElementById('predictionText').innerHTML = this.responseText;

    }
  };

}


// Server side
app.post("/post_data_to_predictor_algorithm", (req, res) => {
  //do your logic and send the response

  res.send(yourResponse) // the onreadystatechange will hadle this on responseText

});

关于javascript - Node 如何操作 HTML DOM - 文档未找到错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60824804/

25 4 0
文章推荐： javascript - AJAX返回对象的未定义属性错误
文章推荐： javascript - 如何单击具有更多边界的 svg 线标记？
文章推荐： html - 在可滚动元素上隐藏滚动条
文章推荐： css - 如何使子菜单可滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com