无法在nodejs上使用cheerio操作DOM

pcww981p 于 2023-01-04 发布在 Node.js

关注(0)|答案(1)|浏览(170)

我正在运行一个简单的程序与服务器端的节点与cheerio。下面给出的代码：

- 服务器端：**

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , request = require ('request')
  , cheerio = require ('cheerio')
  , $;
 

var app = express();
//console.log($('[class = "orange"]').attr('id'));
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);
request('http://localhost:3000', function (error, response, html) {
    if (!error && response.statusCode == 200) {
        $ = cheerio.load(html);
    }   
});
app.listen(3000);
var temp2=9;
app.get('/data2', function(req, res){
    
    //var $ = cheerio.load('<body>');
    //var temp = $('[class="orange"]').attr('id');
    console.log(temp2);
      res.send(temp2); //replace with your data here
});
app.get('/data', function(req, res){
    //var $ = cheerio.load('<body>');
    var temp = $('[class="orange"]').attr('id');
    console.log(temp);
      res.send(temp); //replace with your data here
});

- 索引. ejs（快速模板）**

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>

  <body>
    <h1><%= title %></h1>
      <input type="button" id="stopButton" value="Button1"/>
      <input type="button" id="stopButton2" value="Button2"/>
    <p>Welcome to <%= title %></p>
  <ul id="fruits">
  <li id= "1" class="apple">Apple</li>
  <li id = "2" class="orange">Orange</li>
  <li id = "3" class="pear">Pear</li>
</ul>
  <script type="text/javascript">
      $(document).ready(function () {
          $('#stopButton').click(function () {
              $.get('http://localhost:3000/data', {}, function (data) {
                  $('[id="2"]').html(data);
              });
          });
          $('#stopButton2').click(function () {
              $.get('http://localhost:3000/data2', {}, function (data2) {
                  console.log(data2);
                  $('[id="2"]').text(data2);
              });
          });
      });
 </script> 
 </body>
</html>

该模板创建一个项目列表并将其显示在HTML上。
1.苹果
1.橙色
1.梨

- HTML上还显示了2**按钮：按钮1和按钮2。

当我按下按钮1时，"橙色"变为数字2。当我按下按钮2时，理想情况下橙色应该变为数字9，但实际上没有。是否有什么问题？
这两个按钮的console. log（）都能很好地工作，如控制台中显示的数字2和9所示。
任何帮助都将不胜感激。

node.js

来源：https://stackoverflow.com/questions/31677151/unable-to-manipulate-dom-with-cheerio-on-nodejs

1条答案

按热度按时间

voase2hg1#

这里有些误会这个代码

request('http://localhost:3000', function (error, response, html) {
    if (!error && response.statusCode == 200) {
        $ = cheerio.load(html);
    }   
});
app.listen(3000);

这是没有意义的--您向自己的服务器发出请求，以便创建$对象来使用Cheerio解析表单。然后，当请求通过时，您尝试从HTML中提取用户的表单数据，很久以前，当服务器开始使用var temp = $('[class="orange"]').attr('id');时，您解析了该HTML。
Cheerio不能动态跟踪各种客户机上提供的所有HTML表单值，因此它永远不会有任何您可能期望它拥有的动态数据，只有您提供给客户机的相同原始HTML。
据我所知，Cheerio在这里一点用都没有。它主要是一个从其他网站的HTML中提取数据的网页抓取工具。客户端提交给服务器的数据是从使用request.body、request.params和request.query的HTTP请求的有效载荷、参数和查询字符串中提取的。POST主体有效载荷通常是JSON或URL编码的表单数据。
下面是一个简单的示例，说明如何使用GET请求的查询字符串向服务器发送数据，并使用客户端可以插入到文档中的值进行响应。
views/index.ejs：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= title %></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  </head>
  <body>
    <h1><%= title %></h1>
    <input type="button" id="stop-button" value="Button1" />
    <p>Welcome to <%= title %></p>
    <ul id="fruits">
      <li id="1" class="apple">Apple</li>
      <li id="2" class="orange">Orange</li>
      <li id="3" class="pear">Pear</li>
    </ul>
    <script>
      $(document).ready(() => {
        $("#stop-button").click(() => {
          const url = "http://localhost:3000/data";
          const word = $("#1").text();
          $.get(url, {word}, ({data}) => $("#2").html(data));
        });
      });
    </script>
  </body>
</html>

server.js：

const express = require("express");
const path = require("path");

const app = express();
app.set("port", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.static(path.join(__dirname, "public")));

app.get("/", (req, res) => res.render("index.ejs", {title: "foo"}));

app.get("/data", (req, res) => {
  res.json({data: (req.query.word || "") + Math.random()});
});

app.listen(
  app.get("port"),
  () => console.log(`running on port ${app.get("port")}`)
);

赞(0）回复(0）举报 2023-01-04

我来回答

无法在nodejs上使用cheerio操作DOM

1条答案

相关问题

热门标签

最新问答