JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 PHP 和 jQuery 啟用 AJAX 的便箋

今天我們正在製作一個支持 AJAX 的便箋管理系統。它將使訪問者能夠通過實時預覽創建筆記,並在屏幕上移動它們。每一個動作都會通過 AJAX 發送到後端並保存在數據庫中。

我們使用的是 1.4 版本 jQuery 和 fancybox 插件(你也可以查看我們的 CSS3 Lightbox Gallery 教程,我們也使用了 fancybox)。

您可以下載示例文件並在選項卡中打開演示站點,以便更輕鬆地按照教程的步驟進行操作。

第 1 步 - XHTML

第一步是創建必要的 XHTML 結構。主演示文件中的標記 - demo.php 很簡單,你可以從下面的代碼中看到。

demo.php

<div id="main">
<a id="addButton" class="green-button" href="add_note.html">Add a note</a>

<?php echo $notes?>

</div>

它包含 main div,它保存所有的音符並在拖動過程中限制它們的移動。其餘部分由 PHP 在對數據庫運行 SELECT 查詢後動態生成,並將結果存儲在 $notes 中 變量,您將在下一步中看到。

如果您單擊演示站點上的“添加註釋”按鈕,您將看到彈出一個帶有實時預覽的表單。這個功能是由 fancybox 提供的,它獲取 add_note.html (其中包含表單)並在彈出窗口中顯示。

add_note.html

<h3 class="popupTitle">Add a new note</h3>

<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:0;top:65px;z-index:1">
<div class="body"></div>
<div class="author"></div>
<span class="data"></span>
</div>

<div id="noteData"> <!-- Holds the form -->
<form action="" method="post" class="note-form">

<label for="note-body">Text of the note</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>

<label for="note-name">Your name</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />

<label>Color</label> <!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color green"></div>

<!-- The green submit button: -->
<a id="note-submit" href="" class="green-button">Submit</a>

</form>
</div>

在表格中,您可以填寫備註文本、您的姓名並選擇顏色。為用戶提供一種實時查看他們的筆記在頁面中的顯示方式的方法是一個有用的補充,它還有另一個實際用途 - 當單擊提交按鈕並且燈箱窗口關閉時,預覽筆記被複製到 main div,這樣我們就不用寫額外的代碼了。

第 2 步 - PHP

如前所述,PHP 填充了 $notes 變量通過對數據庫運行查詢並將其輸出到頁面上。讓我們看看它是如何工作的。

demo.php

$query = mysql_query("SELECT * FROM notes ORDER BY id DESC");

$notes = '';
$left='';
$top='';
$zindex='';
while($row=mysql_fetch_assoc($query))
{
    // The xyz column holds the position and z-index in the form 200x100x10:
    list($left,$top,$zindex) = explode('x',$row['xyz']);
    $notes.= '
        <div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;  z-index:'.$zindex.'">
        '.htmlspecialchars($row['text']).'
        <div class="author">'.htmlspecialchars($row['name']).'</div>
        <span class="data">'.$row['id'].'</span>
    </div>';
}

notes 表不僅存儲了註釋的文本和作者,而且還有一個專門的列用於 xy 坐標,以及 z-index (或堆疊順序)。這些存儲在 xyz 表格的字段,由 AJAX 更新。

訪問者點擊“添加備註 " 按鈕,fancybox 抓取 add_note.html (已在第一步中介紹)並顯示實時預覽表單。提交時,通過 AJAX 將數據發送到 post.php ,如下所示。

post.php

// Escaping the input data:
$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
$color = mysql_real_escape_string($_POST['color']);
$zindex = (int)$_POST['zindex'];

/* Inserting a new record in the notes DB: */
mysql_query('   INSERT INTO notes (text,name,color,xyz)
VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');

if(mysql_affected_rows($link)==1)
{
    // Return the id of the inserted row:
    echo mysql_insert_id($link);
}
else echo '0';

在轉義所有輸入數據並將其插入表中後,腳本檢查插入查詢後是否有任何行受到影響。如果 mysql_affected_rows 返回 1,這意味著插入成功並且自動分配的 auto_increment 輸出ID。

AJAX 還用於在每個動作結束後保存各個音符的位置。實際請求這些 AJAX 調用的 JavaScript 代碼在本教程的第 4 步中介紹。 PHP代碼如下:

update_position.php

// Validating the input data:
if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))
die("0");

// Escaping:
$id = (int)$_GET['id'];
$x = (int)$_GET['x'];
$y = (int)$_GET['y'];
$z = (int)$_GET['z'];

// Saving the position and z-index of the note:
mysql_query("UPDATE notes SET xyz='".$x."x".$y."x".$z."' WHERE id=".$id);

echo "1";

在確保輸入數據有效後,腳本會更新相關註釋行的 xyz 字段,並在成功時打印 1。

讓我們繼續第三步。

第 3 步 - CSS

所有的標記都已經到位,所以是時候加入一些花哨的樣式了。樣式在styles.css 中定義。我把文件分成三部分。

styles.css - 第 1 部分

.note{
    height:150px;
    padding:10px;
    width:150px;
    position:absolute;
    overflow:hidden;
    cursor:move;

    font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
    font-size:22px;

    /* Adding a CSS3 shadow below the note, in the browsers which support it: */
    -moz-box-shadow:2px 2px 0 #DDDDDD;
    -webkit-box-shadow:2px 2px 0 #DDDDDD;
    box-shadow:2px 2px 0 #DDDDDD;
}

#fancy_ajax .note{ cursor:default; }

/* Three styles for the notes: */

.yellow{
    background-color:#FDFB8C;
    border:1px solid #DEDC65;
}

.blue{
    background-color:#A6E3FC;
    border:1px solid #75C5E7;
}

.green{
    background-color:#A5F88B;
    border:1px solid #98E775;
}

/* Each note has a data span, which holds its ID */
span.data{ display:none; }

/* The "Add a note" button: */
#addButton{
    position:absolute;
    top:-70px;
    left:0;
}

在第一部分中,我們定義了音符的外觀並提供了三種配色方案 - 黃色、藍色和綠色。創建筆記時,這些顏色類也用於實時預覽表單中。

每個筆記都有一個特殊的 span 元素,其類名為 data ,它保存在數據庫中分配的內部 ID。此 ID 由 jQuery 使用,並與 AJAX 調用一起返回給服務器,以更新便箋的位置和 z-index。我們用 display:none 隱藏了這個 span .

styles.css - 第 2 部分

/* Green button class: */
a.green-button,a.green-button:visited{
    color:black;
    display:block;
    font-size:10px;
    font-weight:bold;
    height:15px;
    padding:6px 5px 4px;
    text-align:center;
    width:60px;

    text-shadow:1px 1px 1px #DDDDDD;
    background:url(img/button_green.png) no-repeat left top;
}

a.green-button:hover{
    text-decoration:none;
    background-position:left bottom;
}

.author{
    /* The author name on the note: */
    bottom:10px;
    color:#666666;
    font-family:Arial,Verdana,sans-serif;
    font-size:12px;
    position:absolute;
    right:10px;
}

#main{
    /* Contains all the notes and limits their movement: */
    margin:0 auto;
    position:relative;
    width:980px;
    height:500px;
    z-index:10;
    background:url(img/add_a_note_help.gif) no-repeat left top;
}

該文件的第二部分定義了綠色按鈕類,包括懸停狀態和 CSS3 文本陰影。這些是一些看似不起眼的小細節,但會給用戶留下良好的整體印象。

styles.css - 第 3 部分

h3.popupTitle{
    border-bottom:1px solid #DDDDDD;
    color:#666666;
    font-size:24px;
    font-weight:normal;
    padding:0 0 5px;
}

#noteData{
    /* The input form in the pop-up: */
    height:200px;
    margin:30px 0 0 200px;
    width:350px;
}

.note-form label{
    display:block;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
    padding-bottom:3px;
}

.note-form textarea, .note-form input[type=text]{
    background-color:#FCFCFC;
    border:1px solid #AAAAAA;
    font-family:Arial,Verdana,sans-serif;
    font-size:16px;
    height:60px;
    padding:5px;
    width:300px;
    margin-bottom:10px;
}

.note-form input[type=text]{    height:auto; }

.color{
    /* The color swatches in the form: */
    cursor:pointer;
    float:left;
    height:10px;
    margin:0 5px 0 0;
    width:10px;
}

#note-submit{   margin:20px auto; }

在styles.css的最後部分,我們為實時預覽表單添加了CSS規則,從H3標題開始,以底部的色板結束。

第 4 步 - jQuery

jQuery 管理前端和所有 AJAX 請求。為了能夠使用該庫,我們首先需要在 demo.php 的頭部包含幾行:

demo.php

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>

<script type="text/javascript" src="script.js"></script>

我們包括來自 Google 內容存儲庫網絡的 jQuery 和 jQuery UI,以及本教程所需的其餘 css 和 js 文件。現在讓我們深入挖掘一下我們的 jQuery 腳本。

script.js - 第 1 部分

$(document).ready(function(){
    /* This code is executed after the DOM has been completely loaded */

    var tmp;

    $('.note').each(function(){
        /* Finding the biggest z-index value of the notes */

        tmp = $(this).css('z-index');
        if(tmp>zIndex) zIndex = tmp;
    })

    /* A helper function for converting a set of elements to draggables: */
    make_draggable($('.note'));

    /* Configuring the fancybox plugin for the "Add a note" button: */
    $("#addButton").fancybox({
        'zoomSpeedIn'       : 600,
        'zoomSpeedOut'      : 500,
        'easingIn'          : 'easeOutBack',
        'easingOut'         : 'easeInBack',
        'hideOnContentClick': false,
        'padding'           : 15
    });

    /* Listening for keyup events on fields of the "Add a note" form: */
    $('.pr-body,.pr-author').live('keyup',function(e){

        if(!this.preview)
            this.preview=$('#previewNote');

        /* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
        this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
    });

    /* Changing the color of the preview note: */
    $('.color').live('click',function(){

        $('#previewNote').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
    });

首先腳本找到最大 z-index 值,以便它可以將其緩存到 zIndex 變量並在每次拖移開始時將其分配給音符之前將其遞增。這樣,當您開始拖動筆記時,它就會被移到堆棧的頂部。

另一個有趣的時刻是我們使用 jQuery live() 監聽事件的方法,而不是常規的 bind() .之所以如此,是因為我們正在監聽事件的頁面元素僅在顯示表單時創建,並且一旦定義,live() 事件偵聽器在所有尚未創建的元素上都處於活動狀態。

script.js - 第 2 部分

  /* The submit button: */
    $('#note-submit').live('click',function(e){

        if($('.pr-body').val().length<4)
        {
            alert("The note text is too short!")
            return false;
        }

        if($('.pr-author').val().length<1)
        {
            alert("You haven't entered your name!")
            return false;
        }

        $(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');

        var data = {
            'zindex'    : ++zIndex,
            'body'      : $('.pr-body').val(),
            'author'        : $('.pr-author').val(),
            'color'     : $.trim($('#previewNote').attr('class').replace('note',''))
        };

        /* Sending an AJAX POST request: */
        $.post('ajax/post.php',data,function(msg){

            if(parseInt(msg))
            {
                /* msg contains the ID of the note, assigned by MySQL's auto increment: */
                var tmp = $('#previewNote').clone();

                tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
                tmp.appendTo($('#main'));

                make_draggable(tmp)
            }

            $("#addButton").fancybox.close();
        });

        e.preventDefault();
    })
});

在這裡,我們正在監聽表單提交鏈接上的點擊事件。單擊後,數據將通過 $.post 進行驗證並發送 方法。如果插入成功,則隱藏燈箱並將新創建的註釋添加到頁面中。請注意,我們正在使用 make_draggable 函數,如下所示。

script.js - 第 3 部分

var zIndex = 0;

function make_draggable(elements)
{
    /* Elements is a jquery object: */
    elements.draggable({
        containment:'parent',
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
        stop:function(e,ui){

            /* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
            $.get('ajax/update_position.php',{
                x       : ui.position.left,
                y       : ui.position.top,
                z       : zIndex,
                id  : parseInt(ui.helper.find('span.data').html())
            });
        }
    });
}

在 script.js 的最後一部分,我們有 make_draggable 功能。它將作為參數傳遞的一組 jQuery 元素轉換為可拖動對象。我已將此功能移到一個單獨的函數中,因為我們需要兩次創建可拖動對象 - 一次是在初始頁面加載時,一次是在我們向頁面添加新註釋時。

第 5 步 - MySQL

如果您計劃在此演示的基礎上運行和構建,則需要在您的服務器上設置一個工作版本。您需要從 table.sql 執行代碼 在 phpMyAdmin 中下載存檔並在 connect.php 中填寫您的數據庫憑據 .

有了這個,我們的 AJAX 便簽系統就完成了!

結論

今天,我們創建了一個支持 Ajax 的便簽管理系統,並演示瞭如何使用 jQuery 庫的一個現成插件來構建一個動態界面,並提供實時預覽。

你怎麼看?您將如何改進此代碼?


Tutorial JavaScript 教程
  1. 更改關於 discord.js 中圖像的頁腳

  2. 在 Flow 上建立 NFT 商店:第 1 部分

  3. node.js:控制台顏色 101

  4. 掌握 useReducer (1/2)

  5. 了解上下文 API

  6. 僅在更新時反應 useEffect

  7. R1 2022 中用於 jQuery 的 Kendo UI 的新功能

  1. 無害的贖金筆記 - 挑戰 1

  2. 使用 HTML CSS 和 JavaScript 的彈出式共享模態 UI 設計

  3. 讓我們探索 JavaScript 中的 async、await 和 promise

  4. 在一小時內構建一個類人對話式 AI 應用程序

  5. JavaScript if not equal (!==) 運算符 |示例代碼

  6. 反應、狀態和你

  7. 獲取 Json 對像上的項目總數?

  1. 發現 Next.js 並以簡單的方式編寫服務器端 React 應用程序

  2. React Portfolio:如何使用 React.js 模板創建您的投資組合網站

  3. 如何在 TalkJS 聊天中創建頻道列表

  4. Node.js 開發終端初學者指南