jqueryを使ってデータベースにアクセスする方法

jQuery は、ページ内での HTML イベント処理、DOM 操作、AJAX 呼び出しなどのタスクを簡素化するために使用される一般的な JavaScript ライブラリです。 jQuery 自体はデータベースへの直接アクセスを提供しませんが、他の JavaScript ライブラリを参照し、サーバーサイド スクリプト言語を使用することでデータベースにアクセスできます。

1. AJAX を使用してバックエンド インターフェイスを呼び出す

AJAX テクノロジを通じてバックエンド インターフェイスを呼び出し、これらのインターフェイスを通じてデータベースにアクセスできます。 AJAX を使用する場合、呼び出しのパラメーターをバックエンドに転送し、バックエンドの処理が完了するのを待って、データをフロントエンドに返し、jQuery を介してデータをページにレンダリングする必要があります。

バックエンドでは、PHP、Node.js、Python、およびその他の言語のデータベース アクセス ライブラリを使用して、データベース アクセス タスクを処理できます。たとえば、Node.js の mongoose ライブラリを使用して MongoDB データベースにアクセスし、データを 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)
    })
})

ご覧のとおり、上記のコードは Express フレームワークを使用して作成されています。 Node.js '/user' パスをリッスンするルート。リクエストが来ると、mongoose ライブラリを通じて MongoDB にアクセスし、すべてのユーザー データを検索し、res.json メソッドを使用してフロントエンドに返します。

フロントエンドは jQuery を使用して AJAX リクエストを開始し、返されたデータをページにレンダリングできます。例:

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

上記の jQuery コードでは、AJAX を使用してバックエンド インターフェイスを呼び出し、すべてのユーザー データを読み取り、そのデータをページ上のテーブルにレンダリングします。

2. jQuery プラグインを使用する

AJAX テクノロジに加えて、データベースに直接アクセスできる jQuery プラグインもいくつかあります。たとえば、DataTabels プラグインを使用して表形式のデータを操作し、データベース内のデータに直接アクセスできます。

DataTables を使用する場合は、バックエンドからデータを取得し、クライアント上でページング、並べ替え、検索などの操作を実行する必要があります。サーバーから返された JSON データを DataTables のデータ属性に割り当て、DataTables を通じてページ上のデータをレンダリングできます。

次は、DataTables を使用してテーブルをレンダリングするためのサンプル コードです:

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

3. ORM フレームワークを使用する

ORM (オブジェクト リレーショナル マッピング) フレームワークを使用すると、次のような問題を回避できます。データベースの直接操作に起因する問題 一連の問題により、データベースの操作タスクがバックエンドに移されました。 ORM フレームワークはデータベースを直接操作し、データをオブジェクト形式にカプセル化して、フロントエンドでのデータのレンダリングを容易にすることができます。

Node.js では、Sequelize モジュールを使用して ORM 機能を実装できます。 Sequelize を使用すると、モデル、データ移行、クエリなどの操作を作成できるため、ユーザーはデータに対して CRUD (作成、読み取り、更新、削除) 操作を簡単に実行できます。

以下は、Sequelize を使用して 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. 概要

実際のプロジェクトでは、通常、データベースにアクセスするにはバックグラウンドでの操作が必要です。 AJAXやjQueryプラグインを利用することでバックエンドからのデータ取得が容易になり、ORMフレームワークを利用するとオブジェクトを操作するだけでCRUD操作ができるため、データベースを直接操作することによるトラブルが軽減され、データベースの保守管理が容易になります。開発者。

以上がjqueryを使ってデータベースにアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。