ホームページ >バックエンド開発 >PHPチュートリアル >PHP アクセス MySql データベース高度な AJAX テクノロジー_PHP チュートリアル

PHP アクセス MySql データベース高度な AJAX テクノロジー_PHP チュートリアル

WBOYオリジナル: 2016-07-13 17:47:54953ブラウズ

この記事を読む前に、「PHP Access MySql データベース - 初級」および「PHP Access MySql データベース - 中級 Smarty テクノロジー」を読むことをお勧めします。

前回の記事では、データベースを読み取ってデータを表示できるプログラムを開発し、プログラムは適切なインターフェイスと論理的分離を実現しました。ただし、このプログラムではデータベースの追加、削除、変更はサポートされていません。したがって、これらの機能をここに追加します。データが追加、削除、または変更されるたびに、AJAX を通じてリクエストがバックグラウンドに送信され、バックグラウンドから返された結果に基づいてページの表示が調整されます。このアプローチにより、サーバーの負荷を軽減できます。

以下は AJAX の簡単な紹介と、その後の完全な例です:

AJAX は、Web サーバーソフトウェアから独立したブラウザーテクノロジーです。これは新しいプログラミング言語ではなく、より優れた、より高速で、よりインタラクティブな Web アプリケーションを作成するためのテクノロジーです。 AJAX を介して、JavaScript の XMLHttpRequest オブジェクトを使用してサーバーと直接通信できます。これにより、ページをリロードせずに Web サーバーとデータを交換できるようになります。同時に、AJAX はブラウザと Web サーバーの間で非同期データ送信 (HTTP リクエスト) を使用するため、Web ページはページ全体ではなく少量の情報をサーバーに要求できます。 AJAX マニュアルには http://api.jquery.com/category/ajax/

からアクセスできます。

以下は、このシリーズの中で最も包括的なプログラムです。テストデータベースの t_student テーブルからデータを読み取り、それを表示します。また、t_student テーブルに対する AJAX の追加、削除、変更操作もサポートしています。インターフェース機能としては、マウスの移動に合わせて表の奇数行と偶数行の色が変わり、プログラムがより美しくなります。

プログラムは、smarty2.php、smarty2.html、smarty2_head.php、smarty2.js、smarty2.cssと、新しく追加されたinsert.php、delete.php、update.phpの8つのファイルに分かれています。

1. Smarty2_head.php ファイル

データベース関連の定数と変数配列を定義します。ここではデータベース名、ユーザー名とパスワード、テーブル名などを定義します。

// 投稿者 MoreWindows( http://blog.csdn.net/MoreWindows )
定義(DB_HOST, 'ローカルホスト'); 定義(DB_USER, 'ルート'); 定義(DB_PASS, '111111'); 定義(DB_DATABASENAME, 'テスト'); 定義(DB_TABLENAME, 't_student');
$dbcolarray = array('id', 'name', 'age'); ?>
// 投稿者 MoreWindows( http://blog.csdn.net/MoreWindows )
定義(DB_HOST, 'ローカルホスト');
定義(DB_USER, 'ルート');
定義(DB_PASS, '111111');
定義(DB_DATABASENAME, 'テスト');
定義(DB_TABLENAME, 't_student');

$dbcolarray = array('id', 'name', 'age');
?>
2. Smarty2.php ファイル

// By MoreWindows( http://blog.csdn.net/MoreWindows )
header("Content-Type: text/html; charset=utf-8");
require('../../smart_libs/Smarty.class.php');
require_once('smarty2_head.php');
date_default_timezone_set("PRC");

//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);

//数
$sql = sprintf("select count(*) from %s", DB_TABLENAME);
$result = mysql_query($sql, $conn);
if ($result)
{
    $dbcount = mysql_fetch_row($result);
    $tpl_db_count = $dbcount[0];
}
その他
{
    die("クエリが失敗しました");
}
$tpl_db_tablename = DB_TABLENAME;
$tpl_db_coltitle = $dbcolarray;
//表中の内容
$tpl_db_rows = 配列();
$sql = sprintf("%s から %s を選択", implode(",",$dbcolarray), DB_TABLENAME);
$result = mysql_query($sql, $conn);
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))//等价$row=mysql_fetch_assoc($result)
    $tpl_db_rows[] = $row;

mysql_free_result($result);
mysql_close($conn);

$tpl = 新しい Smarty;
$tpl->assign('db_tablename', $tpl_db_tablename);
$tpl->assign('db_count', $tpl_db_count);
$tpl->assign('db_coltitle', $tpl_db_coltitle);
$tpl->assign('db_rows', $tpl_db_rows);

$tpl->display('smarty2.html');
?>
// 投稿者 MoreWindows( http://blog.csdn.net/MoreWindows )
header("Content-Type: text/html; charset=utf-8");
require('../../smart_libs/Smarty.class.php');
require_once('smarty2_head.php');
date_default_timezone_set("中国");

//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);

//数
$sql = sprintf("select count(*) from %s", DB_TABLENAME);
$result = mysql_query($sql, $conn);
if ($result)
{
$dbcount = mysql_fetch_row($result);
$tpl_db_count = $dbcount[0];
}
それ以外
{
die("クエリが失敗しました");
}
$tpl_db_tablename = DB_TABLENAME;
$tpl_db_coltitle = $dbcolarray;
//表中の内容
$tpl_db_rows = array();
$sql = sprintf("select %s from %s", implode(",",$dbcolarray), DB_TABLENAME);
$result = mysql_query($sql, $conn);
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))//等价$row=mysql_fetch_assoc($result)
$tpl_db_rows[] = $row;

mysql_free_result($result);
mysql_close($conn);

$tpl = 新しい Smarty;
$tpl->assign('db_tablename', $tpl_db_tablename);
$tpl->assign('db_count', $tpl_db_count);
$tpl->assign('db_coltitle', $tpl_db_coltitle);
$tpl->assign('db_rows', $tpl_db_rows);

$tpl->display('smarty2.html');
?>
3．smarty2.htmlファイル

{$smarty.const.DB_TABLENAME}

表名：{$db_tablename}

{foreach $db_coltitle as $col}

{/foreach}

{foreach $db_rows as $dbrow}

    {foreach $dbrow as $k=>$val}

    {/foreach}


{/foreach}

当前记录数：{$db_count}
{$col}	操作
{$val}

{$smarty.const.DB_TABLENAME}

表名：{$db_tablename}

{foreach $db_coltitle as $col}

{/foreach}

{foreach $db_rows as $dbrow}

    {foreach $dbrow as $k=>$val}

    {/foreach}


{/foreach}

当前记录数：{$db_count}
{$col}	操作
{$val}

4． Smarty2.js ファイル

マウスがテーブルの上を通過したときに行の色が変わる効果を新たに追加しました

//テーブルの最初の列で指定された ID に等しい行を検索します
関数 SearchIdInTable(tablerow, findid)
{
ヴァーリ
var tablerownum = tablerow.length
for (i = 1; i If ($("#Table tr:eq(" + i + ") td:eq(0)").html() == findid)
i を返します。 -1 を返します。 }
// CSS を使用して奇数行と偶数行の色を制御します
関数 SetTableRowColor()
{
$("#Table tr:odd").css("背景色", "#e6e6fa"); $("#Table tr:even").css("背景色", "#fff0fa"); $("#テーブル tr:odd").hover(
Function(){$(this).css("背景色", "オレンジ");},
Function(){$(this).css("背景色", "#e6e6fa");}
); $("#テーブル tr:even").hover(
Function(){$(this).css("背景色", "オレンジ");},
Function(){$(this).css("背景色", "#fff0fa");}
); }
//編集ボタンへの応答
関数 editFun(id, 名前, 年齢)
{
$("#editdiv").show(); $("#addiv").hide();
$("#editdiv_id").val(id); $("#editdiv_name").val(名前); $("#editdiv_age").val(年齢)
}
//追加ボタンへの応答
関数 addFun()
{
$("#editdiv").hide(); $("#addiv").show(); }
//レコード数が増えます
関数 IncTableRowCount()
{
var tc = $("#tableRowCount"); tc.html(parseInt(tc.html()) + 1); }
//レコード数の削減
関数 DecTableRowCount()
{
var tc = $("#tableRowCount"); tc.html(parseInt(tc.html()) - 1); }
//行を追加します
関数 addRowInTable(id, 名前, 年齢)
{
//新しい行を追加します
var appendstr = ""; appendstr += "" + id + ""; appendstr += "" + 名前 + ""; appendstr += "" + 年齢 + ""; appendstr += ""; appendstr += ""; appendstr += ""; $("#Table").append(appendstr); IncTableRowCount(); }
// 特定の行を変更します
関数 updataRowInTable(id, newname, newage)
{
var i = SearchIdInTable($("#Table tr"), id); If (i != -1)
{
$("#Table tr:eq(" + i + ") td:eq(1)").html(name != "" ? name : " "); $("#Table tr:eq(" + i + ") td:eq(2)").html(年齢 != "" ? 年齢 : " "); $("#editdiv").hide(); }
}
// 特定の行を削除
関数 deleteRowInTable(id)
{
var i = SearchIdInTable($("#Table tr"), id); If (i != -1)
                                            //テーブル内の行を削除します
$("#Table tr:eq(" + i + ")").remove(); SetTableRowColor(); DecTableRowCount(); }
}
//AJAX を介してサーバーと通信するためのデータベースの削除および変更関数を追加します
関数 insertFun()
{
変数名 = $("#adddiv_name").val(); var age = $("#addiv_age").val();
If (名前 == "" || 年齢 == "")
{
alert("名前と年齢を入力してください!"); 戻ります;
}

//サーバーに送信すると、挿入されたデータの ID が返されます
$.post("insert.php", {名前:名前, 年齢:年齢}, function(data){
If (データ == "f")
                                                             alert("日付の挿入に失敗しました"); }
それ以外
                                                             addRowInTable(データ, 名前, 年齢); SetTableRowColor(); $("#adddiv").hide(); }
}); }
関数 deleteFun(id)
{
If (confirm("削除を確認しますか?"))
{
//サーバーに送信します
$.post("delete.php", {id:id}, function(data){
if (データ == "f")
                                                                alert("日付の削除に失敗しました");                                                                        その他
                                                                deleteRowInTable(id);                                                                        }); }
}
関数 updateFun()
{
var id = $("#editdiv_id").val(); 変数名 = $("#editdiv_name").val(); var age = $("#editdiv_age").val();
//サーバーに送信します
$.post("updata.php", {id:id, name:name, age:年齢}, function(data){
If (データ == "f")
                                                             alert("日付の更新に失敗しました"); }
それ以外
                                                             updataRowInTable(id, 名前, 年齢)
}
}); }

$(document).ready(function()
{
SetTableRowColor(); UpdataTableRowCount(); }); //テーブルの最初の列で指定された ID に等しい行を検索します
関数 SearchIdInTable(tablerow, findid)
{
var i;
var tablerownum = tablerow.length;
for (i = 1; i if ($("#Table tr:eq(" + i + ") td:eq(0)").html() == findid)
返してください
-1 を返します;
}
// CSS を使用して奇数行と偶数行の色を制御します
関数 SetTableRowColor()
{
$("#Table tr:odd").css("背景色", "#e6e6fa");
$("#Table tr:even").css("背景色", "#fff0fa");
$("#テーブル tr:odd").hover(
function(){$(this).css("背景色", "オレンジ");},
function(){$(this).css("背景色", "#e6e6fa");}
);
$("#テーブル tr:even").hover(
function(){$(this).css("背景色", "オレンジ");},
function(){$(this).css("背景色", "#fff0fa");}
);
}
//編集ボタンへの応答
function editFun(id, 名前, 年齢)
{
$("#editdiv").show();
$("#addiv").hide();

$("#editdiv_id").val(id);
$("#editdiv_name").val(name);
$("#editdiv_age").val(年齢);
}
//追加ボタンへの応答
関数addFun()
{
$("#editdiv").hide();
$("#addiv").show(); }
//レコード数を増やす
関数 IncTableRowCount()
{
var tc = $("#tableRowCount");
tc.html(parseInt(tc.html()) + 1);
}
//レコード数が減ります
関数 DecTableRowCount()
{
var tc = $("#tableRowCount");
tc.html(parseInt(tc.html()) - 1);
}
//行を追加します
関数 addRowInTable(id, 名前, 年齢)
{
//新しい行を追加します
var appendstr = "";
appendstr += "" + id + "";
appendstr += "" + 名前 + "";
appendstr += "" + 年齢 + "";
appendstr += "";
appendstr += "";
appendstr += ""
$("#Table").append(appendstr);
IncTableRowCount();
}
// 特定の行を変更します
関数 updataRowInTable(id, newname, newage)
{
var i = SearchIdInTable($("#Table tr"), id);
If (i != -1)
{
$("#Table tr:eq(" + i + ") td:eq(1)").html(name != "" ? name : " ");
$("#Table tr:eq(" + i + ") td:eq(2)").html(年齢 != "" ? 年齢 : " ");
$("#editdiv").hide();
}
}
// 特定の行を削除
関数 deleteRowInTable(id)
{
var i = SearchIdInTable($("#Table tr"), id);
if (i != -1)
{
//テーブル内のこの行を削除します
$("#Table tr:eq(" + i + ")").remove();
SetTableRowColor();
DecTableRowCount();
}
}
//AJAX を介してサーバーと通信するためのデータベースの削除および変更関数を追加します
関数 insertFun()
{
変数名 = $("#adddiv_name").val();
var age = $("#adddiv_age").val();

if (名前 == "" || 年齢 == "")

{
alert("名前と年齢を入力してください!");
戻ります;
}

//サーバーに送信して返される入力データのid
    $.post("insert.php", {名前:名前, 年齢:年齢}, function(data){
        if (データ == "f")
        {
            alert("日付の挿入に失敗しました");
        }
        それ以外
        {
        addRowInTable(データ, 名前, 年齢);
         SetTableRowColor();
         $("#addiv").hide();
        }
    });
}
関数 deleteFun(id)
{
if (confirm("确认删除?"))
{
  //サーバーに送信
  $.post("delete.php", {id:id}, function(data){
   if (データ == "f")
   {
     alert("日付の削除に失敗しました");
   }
   それ以外
   {
                deleteRowInTable(id);
   }
     });
}
}
関数updataFun()
{
    var id = $("#editdiv_id").val();
    変数名 = $("#editdiv_name").val();
    var age = $("#editdiv_age").val();

//サーバーに送信します
    $.post("updata.php", {id:id, name:name, age:年齢}, function(data){
        if (データ == "f")
        {
            alert("日付の更新に失敗しました");
        }
        それ以外
        {
            updataRowInTable(id, 名前, 年齢);
     }
    });
}

$(document).ready(function()
{
SetTableRowColor();
UpdataTableRowCount();
});
5．smarty2.cssファイル

@charset "utf-8";
h1
{
    赤色;
    テキスト整列:中央;
}
テーブル th
{
    背景色:#7cfc00;
}
@charset "utf-8";
h1
{
色:赤;
text-align:center;
}
テーブルです
{
背景色:#7cfc00;
}
新しく追加されたinsert.php

データを受信パケットに入れると、新しい受信パケットの ID が返され、失敗した場合は "f" が返されます。

クリップボードへのプレーンコピーを表示print? require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$name = $_POST['名前'];
$年齢 = $_POST['年齢'];
//データベースを挿入
$sql = sprintf("INSERT INTO %s(name, age) VALUES('%s', %d)", DB_TABLENAME, $name, $age);
$result=mysql_query($sql, $conn);
if ($result)
echo mysql_insert_id($conn);
その他
エコー「f」;
mysql_close($conn);
?>
require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$name = $_POST['name'];
$年齢 = $_POST['年齢'];
//データベースを挿入
$sql = sprintf("INSERT INTO %s(name, age) VALUES('%s', %d)", DB_TABLENAME, $name, $age);
$result=mysql_query($sql, $conn);
if ($result)
echo mysql_insert_id($conn);
それ以外
エコー「f」;
mysql_close($conn);
?>
新規追加delete.php
7．

id 削除データベースに基づいて一行確認し、成功した場合は "f" を返し、失敗した場合は "t" を返します。

クリップボードへのプレーンコピーを表示print? require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$id = $_POST['id'];
//データベース内の行を削除
$sql = sprintf("id=%d の %s から削除", DB_TABLENAME, $id);
$result = mysql_query($sql, $conn);
mysql_close($conn);
if ($result)
エコー「t」;
その他
エコー「f」;
?>
require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$id = $_POST['id'];
//dbの行を削除
$sql = sprintf("id=%d の %s から削除", DB_TABLENAME, $id);
$result = mysql_query($sql, $conn);
mysql_close($conn);
if ($result)
エコー「t」;
それ以外
エコー「f」;
?>
新しく追加されたupdata.php

id 変更データベース内の一行確認に基づいて、成功した場合は "f" が返され、失敗した場合は "t" が返されます。

require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$id = $_POST['id'];
$name = $_POST['名前'];
$年齢 = $_POST['年齢'];
//データデータベースを更新します
$sql = sprintf("update %s set name='%s',age=%d where id=%d", DB_TABLENAME, $name, $age, $id);
$result=mysql_query($sql, $conn);
mysql_close($conn);
if ($result)
エコー「t」;
その他
エコー「f」;
?>
require_once 'smarty2_head.php';
//mysql_connect
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASS) または die("接続に失敗しました" . mysql_error());
mysql_select_db(DB_DATABASENAME, $conn);
//パラメータ
$id = $_POST['id'];
$name = $_POST['name'];
$年齢 = $_POST['年齢'];
//データベースを更新します
$sql = sprintf("更新 %s セット名 = '%s',age=%d where id=%d", DB_TABLENAME, $name, $age, $id);
$result=mysql_query($sql, $conn);
mysql_close($conn);
if ($result)
エコー「t」;
それ以外
エコー「f」;
?>
程序実行結果如下（Win7 +IE9.0）：

本人 CSS の太さ。テーブル格のレイアウトがポイントになります。

抜粋 MoreWindows

http://www.bkjia.com/PHPjc/478475.html

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP_PHPチュートリアルの読み込みが遅い場合の解決方法次の記事：PHP_PHPチュートリアルの読み込みが遅い場合の解決方法

続きを見る

PHP アクセス MySql データベース 高度な AJAX テクノロジー_PHP チュートリアル

表名：{$db_tablename}

表名：{$db_tablename}

関連記事

PHP アクセス MySql データベース高度な AJAX テクノロジー_PHP チュートリアル