Bagaimana untuk mengakses pangkalan data dengan jquery

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan tugas seperti pengendalian acara HTML, manipulasi DOM, panggilan AJAX, dll. dalam halaman. Walaupun jQuery sendiri tidak menyediakan akses terus kepada pangkalan data, anda boleh mengakses pangkalan data dengan merujuk perpustakaan JavaScript lain dan menggunakan bahasa skrip sebelah pelayan.

1. Gunakan AJAX untuk memanggil antara muka bahagian belakang

Menggunakan teknologi AJAX, anda boleh memanggil antara muka bahagian belakang, dan kemudian mengakses pangkalan data melalui antara muka ini. Apabila menggunakan AJAX, anda perlu memindahkan parameter panggilan ke bahagian belakang, tunggu pemprosesan bahagian belakang selesai, kembalikan data ke bahagian hadapan, dan kemudian berikan data ke halaman melalui jQuery.

Pada bahagian belakang, perpustakaan capaian pangkalan data dalam bahasa seperti PHP, Node.js, Python, dll. boleh digunakan untuk mengendalikan tugas capaian pangkalan data. Sebagai contoh, gunakan perpustakaan mongoose dalam Node.js untuk mengakses pangkalan data MongoDB dan mengembalikan data ke hujung hadapan dalam format JSON:

// 后端代码
var mongoose = require('mongoose')
var db = mongoose.createConnection('mongodb://localhost/test')
var User = db.model('User', {username: String, age: Number})

app.get('/user', function(req, res) {
    User.find({}).exec(function(err, result) {
        if (err) throw err
        res.json(result)
    })
})

Seperti yang anda lihat, kod di atas dicipta menggunakan rangka kerja Express dalam Node.js Laluan yang mendengar laluan '/user' Apabila permintaan datang, ia akan mengakses MongoDB melalui pustaka mongoose, mencari semua data pengguna dan mengembalikannya ke bahagian hadapan menggunakan kaedah res.json.

Hujung hadapan boleh menggunakan jQuery untuk memulakan permintaan AJAX dan memberikan data yang dikembalikan ke dalam halaman. Contohnya:

// 前端代码
$.ajax({
    url: '/user',
    type: 'GET',
    success: function(data) {
        // 渲染数据
        var html = ''
        for (var i = 0; i < data.length; i++) {
            var user = data[i]
            html += '<tr><td>' + user.username + '</td><td>' + user.age + '</td></tr>'
        }
        $('.user-table').append(html)
    }
})

Dalam kod jQuery di atas, AJAX digunakan untuk memanggil antara muka bahagian belakang, membaca semua data pengguna dan kemudian menjadikan data ke dalam jadual pada halaman.

2. Gunakan pemalam jQuery

Selain teknologi AJAX, terdapat juga pemalam jQuery yang boleh mengakses pangkalan data secara langsung. Contohnya, anda boleh menggunakan pemalam DataTabels untuk memproses data jadual dan terus mengakses data dalam pangkalan data.

Apabila menggunakan DataTables, anda perlu mendapatkan data daripada bahagian belakang, dan kemudian melakukan operasi seperti halaman, menyusun dan mencari pada klien. Anda boleh menetapkan data JSON yang dikembalikan oleh pelayan kepada atribut data DataTables, dan kemudian memberikan data melalui DataTable pada halaman.

Berikut ialah contoh kod untuk menggunakan DataTables untuk memaparkan jadual:

// 前端代码
$(document).ready(function() {
    $('#user-table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/user",
            "type": "POST"
        },
        "columns": [
            { "data": "username" },
            { "data": "age" },
        ]
    })
})

3 Gunakan rangka kerja ORM

ORM (Object-Relational Mapping) boleh mengelakkan masalah. disebabkan oleh mengendalikan pangkalan data secara langsung Beberapa siri masalah telah mengalihkan tugas mengendalikan pangkalan data ke bahagian belakang. Rangka kerja ORM boleh mengendalikan pangkalan data secara langsung dan merangkum data ke dalam bentuk objek untuk memudahkan pemaparan data pada bahagian hadapan.

Dalam Node.js, fungsi ORM boleh dilaksanakan menggunakan modul Sequelize. Menggunakan Sequelize boleh mencipta model, migrasi data, pertanyaan dan operasi lain, membolehkan pengguna melakukan operasi CRUD (Buat, Baca, Kemas Kini, Padam) dengan mudah pada data.

Berikut ialah contoh kod yang menggunakan Sequelize untuk melaksanakan ORM:

// 后端代码
const Sequelize = require('sequelize')
const sequelize = new Sequelize('mysql://root:123456@localhost:3306/test')

const User = sequelize.define('user', {
    username: Sequelize.STRING,
    age: Sequelize.INTEGER
})

app.get('/users', async (req, res) => {
    const users = await User.findAll()
    res.json(users)
})

// 前端代码
$.ajax({
    url: '/users',
    type: 'GET',
    success: function(data) {
        // 渲染数据
        var html = ''
        for (var i = 0; i < data.length; i++) {
            var user = data[i]
            html += '<tr><td>' + user.username + '</td><td>' + user.age + '</td></tr>'
        }
        $('.user-table').append(html)
    }
})

4. Ringkasan

Dalam projek sebenar, mengakses pangkalan data biasanya memerlukan operasi backend. Data boleh diperolehi daripada bahagian belakang dengan lebih mudah melalui pemalam AJAX dan jQuery Apabila menggunakan rangka kerja ORM, anda hanya perlu mengendalikan objek untuk melaksanakan operasi CRUD, yang mengurangkan masalah yang disebabkan oleh mengendalikan pangkalan data secara langsung dan memudahkan kerja penyelenggaraan dan pengurusan. untuk pemaju.

Atas ialah kandungan terperinci Bagaimana untuk mengakses pangkalan data dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!