ajax menghantar permintaan nodejs-Soal Jawab bahagian hadapan-php.cn

ajax menghantar permintaan nodejs

PHPz

Lepaskan： 2023-05-08 10:05:37

asal

572 orang telah melayarinya

Nota: Artikel ini akan memperkenalkan cara menggunakan ajax untuk menghantar permintaan nodejs dari perspektif front-end Jika anda tidak biasa dengan nodejs, anda boleh mempelajarinya terlebih dahulu.

Dengan pembangunan berterusan pembangunan web, interaksi data antara bahagian hadapan dan bahagian belakang telah menjadi salah satu fungsi penting banyak laman web atau aplikasi. Sebagai bahagian penting dalam teknologi hadapan, Ajax boleh merealisasikan permintaan tak segerak dan interaksi data tanpa menyegarkan halaman. Sebagai pilihan popular untuk teknologi belakang, Node.js juga menyediakan API yang mudah untuk mengendalikan permintaan dan respons HTTP.

Jadi, bagaimana hendak menggunakan Ajax untuk menghantar permintaan Node.js? Perkara berikut akan diperkenalkan dari aspek berikut.

Pasang dan mulakan perkhidmatan Node.js

Mula-mula, anda perlu memasang Node.js dan mencipta perkhidmatan Node.js. Proses pemasangan Node.js tidak akan diperkenalkan di sini, dengan mengandaikan bahawa ia telah selesai.

Kemudian, masukkan folder tempat projek terletak pada baris arahan dan jalankan arahan berikut:

$ npm init -y
$ npm install express --save

Salin selepas log masuk

Arahan di atas akan memulakan projek Node.js dan memasang rangka kerja Express. Seterusnya, cipta fail bernama app.js dan tambahkan kod berikut di dalamnya:

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({"message":"Hello World!"});
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

Salin selepas log masuk

Kod di atas mencipta laluan bernama /api, yang akan mengembalikan mesej yang mengandungi "Hello World!" Perkhidmatan Node.js akan mendengar port 3000 selepas ia dimulakan.

Jalankan arahan berikut untuk memulakan perkhidmatan Node.js:

$ node app.js

Salin selepas log masuk

Lawati http://localhost:3000/api dalam penyemak imbas, anda seharusnya melihat kandungan berikut:

{"message":"Hello World!"}

Salin selepas log masuk

Ini menunjukkan bahawa perkhidmatan Node.js telah berjaya disediakan dan boleh mengendalikan permintaan HTTP.

Gunakan Ajax untuk menghantar permintaan HTTP

Seterusnya, gunakan Ajax untuk menghantar permintaan kepada perkhidmatan Node.js di halaman hujung hadapan. Mengambil jQuery sebagai contoh di sini, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu ke dalam fail html. Anda boleh menggunakan CDN untuk memperkenalkannya, atau anda boleh memuat turun terus fail jQuery secara tempatan.

Tambah kod berikut dalam fail html:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <meta charset="utf-8">
  <title>Ajax Demo</title>
</head>
<body>
  <button id="btn">发送请求</button>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(){
        $.ajax({
          url: '/api',
          type: 'GET',
          dataType: 'json',
          success: function(data){
            console.log(data);
          },
          error: function(xhr, status, error){
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Kod di atas mencipta butang Apabila butang diklik, permintaan GET dihantar ke Node menggunakan fungsi $.ajax() jQuery. Laluan /api untuk perkhidmatan .js. Selepas permintaan berjaya, konsol akan mengeluarkan objek JSON yang dikembalikan daripada pelayan.

Anda boleh memilih elemen DOM yang sepadan melalui pemilih dan mengikat fungsi pemprosesan acara untuk merealisasikan interaksi data antara halaman dan hujung belakang. Ini adalah salah satu cara yang paling penting untuk menggunakan Ajax.

Mengendalikan permintaan Node.js

Akhir sekali, permintaan itu perlu dikendalikan dalam perkhidmatan Node.js. Tambahkan kod berikut pada app.js:

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/public/index.html');
});

Salin selepas log masuk

Kod di atas menambah perkhidmatan fail statik pada perkhidmatan Node.js dan menetapkan halaman utama kepada fail index.html dalam folder awam.

Kini anda boleh membuka http://localhost:3000 dalam penyemak imbas, klik butang "Hantar Permintaan", konsol akan mengeluarkan objek JSON yang dikembalikan daripada pelayan, dan halaman itu juga akan memaparkan "Hello Dunia!" mesej .

Ringkasan

Artikel ini memperkenalkan cara menggunakan Ajax untuk menghantar permintaan Node.js dan memberikan pengenalan ringkas tentang cara bahagian hadapan dan bahagian belakang berinteraksi. Dengan cara ini, bahagian hadapan boleh berinteraksi dengan data bahagian belakang dengan agak mudah, mencapai fungsi yang lebih kaya dan pengalaman pengguna yang lebih baik. Sudah tentu, keupayaan Node.js untuk mengendalikan permintaan HTTP adalah jauh lebih daripada ini, dan fungsi yang lebih kompleks dan lengkap memerlukan kajian dan amalan yang mendalam.

Atas ialah kandungan terperinci ajax menghantar permintaan nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!