0

所以我刚开始第一次尝试使用 express 进行一些轻量级的后端开发。我想从一个 html/js 文件中调用一个 POST 请求，我发现了如何使用 Jquery 来完成它。但是我想知道你如何在纯 javascript 中做同样的事情。这是我在 Jquery 中的代码：

- -服务器 - -

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));

const greens = {"orange"}

app.get("/greens", (req, res) => {
    res.json(greens);
});

app.post('/greens', (req,res) => {
  var itemName=req.body.itemName;
  console.log("name = "+itemName);
  res.end("yes");
});

app.listen(3000, "localhost", () => {
    console.log("the server is up and running! http://localhost:3000/greens");
});

---JS文件---

$(document).ready(function(){
    var itemName;
    $("#submit").click(function() {
        let Name = "banana";
        $.post("http://localhost:3000/login",{itemName: Name}, function(data){
        });
    });
});

附言。我拥有的 HTML 代码只是一个 ID 为“提交”的按钮。pps。我知道代码并没有真正做任何事情，但我只想知道如何将 jquery 转换为 javascript，仅此而已。

使用 fetch 解决！

    fetch("http://localhost:3000/login",
{
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({itemName: "user"})
});
4

3 回答 3

1

有两种方法可以做到这一点。这取决于您是否要使用 ES5 或 ES6 及更高版本。

对于 ES5 尝试看这里，它解释得很好：https ://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

对于 ES6，您可以使用 fetch-API：https ://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

希望本教程对您有所帮助！

于 2020-04-19T11:12:19.413 回答
1

jQuery 代码可以翻译成以下纯 JS 代码：

document.getElementById("submit").addEventListener("click", () => {
    let xmlHttp = new XMLHttpRequest();
    let Name = "banana";

    xmlHttp.open("post", "http://localhost:3000/login", true);
    xmlHttp.setRequestHeader("Content-Type", "application/json");
    xmlHttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xmlHttp.send(JSON.stringify({itemName: Name}));
});

至于文档准备部分，您可以在这里找到它的纯实现： Pure JavaScript 等价于 jQuery 的 $.ready() - 如何在页面/DOM 准备好时调用函数

于 2020-04-19T11:14:43.600 回答
0

希望这会帮助你。根据您的要求使用。

服务器

const express = require('express');
const cors = require('cors')
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors())
const port = 3000;

app.get('/', (req, res) => {
    res.send('Hello world');
});

app.post('/greens', (req, res) => {
    const body = req.body;
    console.log('BODY', body);
    res.json(body);
});

app.listen(port, ()=>{
    console.log(`Listening to ${port}`);
})

前端代码：

$(document).ready(function(){
    const item = $('#item');
    const submit = $('#handleSubmit');
    submit.click((e)=>{
        e.preventDefault();
        let fruitName = item.val();
        debugger;
        $.post( "http://localhost:3000/greens", { itemName: fruitName })
        .done(function( data ) {
          alert( "Data Loaded: " + data );
        });
    })
})

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</head>
<body>
    <form>
        <input type="text" id="item" value="" name="item"/>
        <button type="submit" id="handleSubmit">Submit</button>
    </form>
</body>
</html>
于 2020-04-19T11:43:52.847 回答