Heim  >  Artikel  >  Web-Frontend  >  So greifen Sie mit jquery auf die Datenbank zu

So greifen Sie mit jquery auf die Datenbank zu

PHPz
PHPzOriginal
2023-05-28 13:35:10911Durchsuche

jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung von Aufgaben wie HTML-Ereignisbehandlung, DOM-Manipulation, AJAX-Aufrufen usw. auf der Seite verwendet wird. Obwohl jQuery selbst keinen direkten Zugriff auf die Datenbank bietet, können Sie auf die Datenbank zugreifen, indem Sie auf andere JavaScript-Bibliotheken verweisen und serverseitige Skriptsprachen verwenden.

1. Verwenden Sie AJAX, um die Backend-Schnittstelle aufzurufen.

Mit der AJAX-Technologie können Sie die Backend-Schnittstelle aufrufen und dann über diese Schnittstellen auf die Datenbank zugreifen. Wenn Sie AJAX verwenden, müssen Sie die Parameter des Aufrufs an das Backend übertragen, warten, bis die Backend-Verarbeitung abgeschlossen ist, die Daten an das Frontend zurückgeben und sie dann über jQuery auf der Seite rendern.

Im Backend können Datenbankzugriffsbibliotheken in PHP, Node.js, Python und anderen Sprachen zur Abwicklung von Datenbankzugriffsaufgaben genutzt werden. Verwenden Sie beispielsweise die Mongoose-Bibliothek in Node.js, um auf die MongoDB-Datenbank zuzugreifen und die Daten im JSON-Format an das Frontend zurückzugeben:

// 后端代码
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)
    })
})

Wie Sie sehen können, verwendet der obige Code das Express-Framework in Node.js, um eine zu erstellen Route und Listener-Pfad „/user“. Wenn eine Anfrage eingeht, wird über die Mongoose-Bibliothek auf MongoDB zugegriffen, alle Benutzerdaten werden gefunden und die Methode res.json wird verwendet, um sie an das Frontend zurückzugeben.

Das Frontend kann jQuery verwenden, um AJAX-Anfragen zu initiieren und die zurückgegebenen Daten auf der Seite darzustellen. Beispiel:

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

Im obigen jQuery-Code wird AJAX verwendet, um die Back-End-Schnittstelle aufzurufen, alle Benutzerdaten zu lesen und die Daten dann in einer Tabelle auf der Seite darzustellen.

2. Verwenden Sie jQuery-Plug-ins

Neben der AJAX-Technologie gibt es auch einige jQuery-Plug-ins, die direkt auf die Datenbank zugreifen können. Sie können beispielsweise das DataTabels-Plug-in verwenden, um mit tabellarischen Daten zu arbeiten und direkt auf Daten in einer Datenbank zuzugreifen.

Wenn Sie DataTables verwenden, müssen Sie Daten vom Backend abrufen und dann Vorgänge wie Paginieren, Sortieren und Suchen auf dem Client ausführen. Sie können die vom Server zurückgegebenen JSON-Daten dem Datenattribut von DataTables zuweisen und die Daten dann über DataTables auf der Seite rendern.

Das Folgende ist ein Beispielcode für die Verwendung von DataTables zum Rendern einer Tabelle:

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

3. Verwenden Sie das ORM-Framework

Das ORM-Framework (Object-Relational Mapping) kann eine Reihe von Problemen vermeiden, die durch den direkten Betrieb der Datenbank und die Übertragung verursacht werden die Aufgabe, die Datenbank bis zum Backend zu betreiben. Das ORM-Framework kann die Datenbank direkt betreiben und die Daten in Objektform kapseln, um die Datenwiedergabe im Frontend zu erleichtern.

In Node.js kann die ORM-Funktionalität mithilfe des Sequelize-Moduls implementiert werden. Mit Sequelize können Modelle, Datenmigrationen, Abfragen und andere Vorgänge erstellt werden, sodass Benutzer problemlos CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren, Löschen) für Daten durchführen können.

Das Folgende ist ein Beispielcode, der Sequelize zur Implementierung von ORM verwendet:

// 后端代码
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 Zusammenfassung

In tatsächlichen Projekten sind für den Zugriff auf die Datenbank normalerweise Backend-Vorgänge erforderlich. Daten können über AJAX- und jQuery-Plug-Ins einfacher vom Backend abgerufen werden. Bei Verwendung des ORM-Frameworks müssen Sie nur Objekte bedienen, um CRUD-Vorgänge auszuführen, was die durch den direkten Betrieb der Datenbank verursachten Probleme reduziert und die Wartung und Verwaltung erleichtert Entwickler.

Das obige ist der detaillierte Inhalt vonSo greifen Sie mit jquery auf die Datenbank zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn