Вызовите запрос POST из файла html или js, Express - PullRequest
Новая
       23

Вызовите запрос POST из файла html или js, Express

0 голосов
/ 19 апреля 2020

Так что я только начал пробовать какую-то легкую разработку, используя express. И я хочу вызвать запрос POST из файла html / js, и я нашел, как это сделать с 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, который у меня есть, это всего лишь кнопка с идентификатором «submit». имп. Я знаю, что код на самом деле ничего не делает, но я просто хочу знать, как перевести jquery в javascript, больше ничего.

Решено с помощью fetch! 

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

Ответы [ 3 ]

1 голос
/ 19 апреля 2020

Код 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 эквивалент $ .ready () в jQuery - как вызвать функцию, когда страница / DOM готова к этому

1 голос
/ 19 апреля 2020

Есть два способа сделать это. Это зависит от того, хотите ли вы использовать 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

Надеюсь, этот урок вам поможет!

0 голосов
/ 19 апреля 2020

Надеюсь, это поможет вам. Используйте согласно вашему требованию.

SERVER 

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>
...