Comment accéder à la base de données avec jquery

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier des tâches telles que la gestion des événements HTML, la manipulation DOM, les appels AJAX, etc. dans la page. Bien que jQuery lui-même ne fournisse pas d'accès direct à la base de données, vous pouvez accéder à la base de données en référençant d'autres bibliothèques JavaScript et en utilisant des langages de script côté serveur.

1. Utilisez AJAX pour appeler l'interface backend

En utilisant la technologie AJAX, vous pouvez appeler l'interface backend, puis accéder à la base de données via ces interfaces. Lorsque vous utilisez AJAX, vous devez transférer les paramètres de l'appel vers le backend, attendre la fin du traitement backend, renvoyer les données au frontend, puis restituer les données sur la page via jQuery.

Dans le backend, les bibliothèques d'accès aux bases de données en PHP, Node.js, Python et d'autres langages peuvent être utilisées pour gérer les tâches d'accès aux bases de données. Par exemple, utilisez la bibliothèque mongoose dans Node.js pour accéder à la base de données MongoDB et renvoyer les données au front-end au 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)
    })
})

Comme vous pouvez le voir, le code ci-dessus utilise le framework Express dans Node.js pour créer un route et chemin d'écoute '/user', lorsqu'une requête arrive, MongoDB sera accessible via la bibliothèque mongoose, toutes les données utilisateur seront trouvées et la méthode res.json sera utilisée pour les renvoyer au front-end.

Le front-end peut utiliser jQuery pour lancer des requêtes AJAX et restituer les données renvoyées dans la page. Par exemple :

// 前端代码
$.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)
    }
})

Dans le code jQuery ci-dessus, AJAX est utilisé pour appeler l'interface back-end, lire toutes les données utilisateur, puis restituer les données dans un tableau sur la page.

2. Utilisez les plug-ins jQuery

En plus de la technologie AJAX, il existe également des plug-ins jQuery qui peuvent accéder directement à la base de données. Par exemple, vous pouvez utiliser le plug-in DataTabels pour travailler avec des données tabulaires et accéder directement aux données d'une base de données.

Lorsque vous utilisez DataTables, vous devez obtenir des données du backend, puis effectuer des opérations telles que la pagination, le tri et la recherche sur le client. Vous pouvez attribuer les données JSON renvoyées par le serveur à l'attribut data de DataTables, puis restituer les données via DataTables sur la page.

Ce qui suit est un exemple de code pour utiliser DataTables pour restituer un tableau :

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

3. Utilisez le framework ORM

Le framework ORM (Object-Relational Mapping) peut éviter une série de problèmes causés par l'exploitation directe de la base de données et le transfert. la tâche d’exploiter la base de données jusqu’au backend. Le framework ORM peut exploiter directement la base de données et encapsuler les données sous forme d'objet pour faciliter le rendu des données sur le front-end.

Dans Node.js, la fonctionnalité ORM peut être implémentée à l'aide du module Sequelize. L'utilisation de Sequelize peut créer des modèles, des migrations de données, des requêtes et d'autres opérations, permettant aux utilisateurs d'effectuer facilement des opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) sur les données.

Ce qui suit est un exemple de code qui utilise Sequelize pour implémenter 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)
    }
})

IV Résumé

Dans les projets réels, l'accès à la base de données nécessite généralement des opérations backend. Les données peuvent être obtenues plus facilement à partir du backend via les plug-ins AJAX et jQuery Lorsque vous utilisez le framework ORM, il vous suffit d'utiliser des objets pour effectuer des opérations CRUD, ce qui réduit les problèmes causés par l'exploitation directe de la base de données et facilite la maintenance et la gestion de celle-ci. développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!