一些与url、Javascript和Json相关的问题答案

【问题标题】：Some problems related to url, Javascript and Json一些与url、Javascript和Json相关的问题
【发布时间】：2022-09-25 03:08:14
【问题描述】：

我需要一点手，因为我无法让这段代码工作......通过html中的输入标签，我应该获取用户输入的url，将其保存在变量pageURL中，将所有内容转换为JSON并发送到我的nodejs服务器整体。但是，当我尝试这样做时，甚至没有发送请求，我不知道为什么。相反，如果我尝试在输入框中输入一个简单的字符串而不是 url，那么一切正常......有什么想法吗？谢谢！！

HTML

<main>
        <div id=\"main-scanner\">
            <div id=\"inner-scanner\">
                <h1 id=\"scanner-h1\">Ready to scan your page!</h1>
                <form id=\"scanner-form\">
                    <label id=\"scanner-label\">Please, enter the URL you want to scan:</label>
                    <br>
                    <input type=\"url\" id=\"scanner-input\" placeholder=\"              Scan me!\" required>
                    <br>
                    <button id=\"scanner-button\">Scan</button>
                </form>
            </div>
            <div id=\"result\">
            </div>
        </div>
        <script src=\"../js/index.js\" type=\"text/javascript\"></script>
    </main>

app.post 来自服务器，只是测试一下是否收到请求

app.post(\"/send\", async (req, res) => {
    console.log(\"test\")
    let requestData = req.body;
    console.log(requestData)

JavaScript 代码


document.getElementById(\"scanner-button\").addEventListener(\"click\", send);

function send(){
    var pageURL =document.getElementById(\'scanner-input\').value;
    console.log(pageURL)
    let infos = {
        url : pageURL,
        vulnerable : false,
        report : \"\"
    };

    let request = new XMLHttpRequest();
    request.open(\"POST\", \"http://localhost:3000/send\", true);
    request.setRequestHeader(\'Content-Type\', \'application/json\');
    console.log(infos)
    let data = JSON.stringify(infos);
    request.send(data)
}

你在哪里打电话send？
@DaveNewton我刚刚看到我忘记放置触发函数的eventListener ...我已经编辑了代码。只是忘了放在这里
您能否提供一个有效但无效的 url/string 示例？您是否还在浏览器开发者控制台中看到任何错误？
@Telman 我在控制台中没有看到任何错误，我知道这很奇怪，但它根本不会调用 app.post 的函数。示例...如果我尝试输入像 \"test1234\" 这样的字符串，Node 服务器会正确接收 JSON 文件，一切正常；如果我尝试类似 \"youtube.com\" 或任何网址，它就会停止工作，我不知道为什么
所以你可能会在浏览器网络中看到 javascript 发出请求，但 Node 只是没有看到那个请求，对吧？如果是这样，接收方可能存在一些问题。你可以在发送之前尝试escape url，就像这样 - url : escape(pageURL)

标签： javascript html node.js input event-listener

【解决方案1】：

客户：

document.querySelector("#scanner-button").addEventListener("click", async () => {
  const pageUrl = document.querySelector("#scanner-input").value;
  console.log(pageUrl);

  // Dont use localhost in production, host the server with a domain or public static IP address
  await fetch("http://localhost:3000/send", {
    "method": "POST",
    "headers": {
      "Content-Type": "application/json"
    },
    "body": JSON.stringify({
      url: pageUrl,
      vunerable: false,
      report: ""
    })
  })
});

<!DOCTYPE HTML>
<html lang="en-us">
<body>
  <main>
    <div id="main-scanner">
      <div id="inner-scanner">
        <h1 id="scanner-h1">Scan Page</h1>
        <form id="scanner-form">
          <label id="scanner-label">URL To scan</label>
          <br>
          <input type="url" id="scanner-input" placeholder="URL to scan" required>
          <br>
          <button id="scanner-button">Scan</button>
        </form>
      </div>
      <div id="result"></div>
    </div>
  </main>
</body>
</html>

服务器：

const bodyParser = require('body-parser'); 
const express = require('express');
const app = express();

app.use(bodyParser.urlencoded({
     extended: true
}));

app.post('/send', (req, res) => {
    console.log(req.body);
});

您需要添加 express bodyParser 中间件来解析 POST 请求的正文。使用新的基于异步承诺的 fetch API 而不是旧的 XMLHttpRequest API。

【讨论】：