コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > PHP アクセス MySql データベース 高度な AJAX テクノロジー_PHP チュートリアル

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

WBOY
リリース： 2016-07-13 17:47:54
オリジナル
954 人が閲覧しました

この記事を読む前に、「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} 
当前记录数：     
{$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}
当前记录数：     
{$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

tru​​ehttp://www.bkjia.com/PHPjc/478475.html技術記事この文章を読む前に、《PHP アクセス MySql データブロック 初段》と《PHP アクセス MySql データブロック 中段 Smarty テクニック》を参照してください。
関連ラベル：
ajax mysql php テクノロジー 推薦する データベース アクセス 読む 高度な
ソース：php.cn
前の記事：PHP_PHPチュートリアルの読み込みが遅い場合の解決方法 次の記事：PHP での PDO_PHP の使用に関するチュートリアル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
から 2024-04-06 21:55:20
0
1
778
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...
から 2024-04-06 17:27:56
0
1
406
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート