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

讓我們做一個簡單的 AJAX 筆記應用程序

LINKTEXT在本教程中,我們將使用 PHP 和 jQuery 製作一個簡單的應用程序,讓用戶可以寫筆記。註釋將保存在服務器上的純文本文件中。它演示瞭如何在 PHP 中讀取和寫入文件,如何使用 jQuery 調整文本區域的大小,取決於其中的文本,以及如何創建簡單的 AJAX 交互。

從上方的按鈕獲取演示副本並繼續閱讀!

HTML

首先,我們需要創建一個常規的 HTML5 文檔。我只包含了下面的重要部分,但您可以在 index.php 中查看其餘部分 .請注意,為簡單起見,我已將 PHP 代碼放在同一個文件中。

index.php

<div id="pad">
    <h2>Note</h2>
    <textarea id="note"><?php echo $note_content ?></textarea>
</div>

這就是我們需要的所有標記!當然,我們將在幾分鐘內使用 CSS 對其進行大量樣式設置。我還在頁面下方(在結束 body 標記之前)包含了 jQuery 庫以及我們的 script.js 文件,但我不會在這裡展示它。重要的是文本區域內的 PHP echo 語句。它打印用戶最後保存的筆記。

PHP

該示例的 PHP 代碼很簡單。它的作用是在頁面加載時讀取和呈現註釋的內容,並在 jQuery 發送 AJAX 請求時寫入它。這將導致便箋文件被覆蓋。

index.php

$note_name = 'note.txt';
$uniqueNotePerIP = true;

if($uniqueNotePerIP){

    // Use the user's IP as the name of the note.
    // This is useful when you have many people
    // using the app simultaneously.

    if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
        $note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
    }
    else{
        $note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
    }
}

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
    // This is an AJAX request

    if(isset($_POST['note'])){
        // Write the file to disk
        file_put_contents($note_name, $_POST['note']);
        echo '{"saved":1}';
    }

    exit;
}

$note_content = '';

if( file_exists($note_name) ){
    $note_content = htmlspecialchars( file_get_contents($note_name) );
}

注意 $uniqueNotePerIP 多變的。我在演示中使用它,以便每個用戶都得到一個獨特的註釋。此設置將導致以訪問者的 IP 地址作為名稱保存每條筆記。如果您希望每個人共享一個筆記,您可以將其設置為 false,但請記住,如果兩個人同時編輯筆記,最後保存的人將覆蓋它,並且在極少數情況下,筆記本身可能會損壞。

接下來是 jQuery 代碼!

jQuery

jQuery 在這個應用程序中的工作是監聽文本區域的變化,並通過 AJAX post 發送它們 請求返回 index.php,將文本寫入文件。

通常的方法是將處理程序綁定到 keypress 事件,但在某些情況下,這還不夠,因為用戶可能只是將文本粘貼到文本區域,通過瀏覽器選擇自動更正建議或撤消更改。對我們來說幸運的是,還有另一個事件可以處理所有這些情況。它是輸入 所有現代瀏覽器都支持的事件(在此處閱讀更多內容)。可以看下面的代碼。

assets/js/script.js

$(function(){

    var note = $('#note');

    var saveTimer,
        lineHeight = parseInt(note.css('line-height')),
        minHeight = parseInt(note.css('min-height')),
        lastHeight = minHeight,
        newHeight = 0,
        newLines = 0;

    var countLinesRegex = new RegExp('\n','g');

    // The input event is triggered on key press-es,
    // cut/paste and even on undo/redo.

    note.on('input',function(e){

        // Clearing the timeout prevents
        // saving on every key press
        clearTimeout(saveTimer);
        saveTimer = setTimeout(ajaxSaveNote, 2000);

        // Count the number of new lines
        newLines = note.val().match(countLinesRegex);

        if(!newLines){
            newLines = [];
        }

        // Increase the height of the note (if needed)
        newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);

        // This will increase/decrease the height only once per change
        if(newHeight != lastHeight){
            note.height(newHeight);
            lastHeight = newHeight;
        }
    }).trigger('input');    // This line will resize the note on page load

    function ajaxSaveNote(){

        // Trigger an AJAX POST request to save the note
        $.post('index.php', { 'note' : note.val() });
    }

});

上面代碼的另一件有用的事情是計算文本中的新行數並自動放大文本區域,具體取決於 line-height 的值 CSS 屬性。

這是 CSS。

CSS

在本節中,我們將為您在教程的 HTML 部分中看到的三個元素設置樣式。您在那裡看到的三個元素中的每一個都經過了樣式設置並添加了背景圖像。對於記事本的底部,我使用的是 :after 元素。 jQuery調整textarea大小時,底部自動下推。

assets/css/styles.css

#pad{
    position:relative;
    width: 374px;
    margin: 180px auto 40px;
}

#note{
    font: normal 15px 'Courgette', cursive;
    line-height: 17px;
    color:#444;
    background: url('../img/mid.png') repeat-y;
    display: block;
    border: none;
    width: 329px;
    min-height: 170px;
    overflow: hidden;
    resize: none;
    outline: 0px;
    padding: 0 10px 0 35px;
}

#pad h2{
    background: url('../img/header.png') no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    height: 69px;
    position: relative;
}

#pad:after{
    position:absolute;
    content:'';
    background:url('../img/footer.png') no-repeat;
    width:100%;
    height:40px;
}

此外,我還包含了來自 Google Web Fonts 的 Courgette 字體,您可以在 #note 中看到該字體 塊。

完成!

我希望你喜歡這個簡單的例子,並且充滿了改進的想法。如果您需要支持沒有 input 的舊 IE 版本 事件,我建議您更改代碼,以便每隔 5 或 10 秒自動發送 AJAX 請求。


Tutorial JavaScript 教程
  1. 將 Js 鏈接到 Html:將 CSS 和 Js 文件與 HTML 文件鏈接。

  2. 使用 Jest 測試您的演示性 React 組件的 3 個快速勝利

  3. JavaScript 數組輔助方法

  4. 在 Deno 中設計 URL 縮短器

  5. 前 3 名 ThreeJs 書籍

  6. 報價製作實驗室:Redux/React

  7. 在 Yii 框架中包含 CSS、javascript 文件

  1. 反應電子樣板

  2. 使用 Nx 分解項目 - 第 1 部分

  3. 從 React Google Maps API 中的 Circle 組件獲取新的位置和半徑

  4. Vue 2 中的客戶端搜索

  5. 如何在 JavaScript 中實現 8 個基本的圖算法

  6. 如何使用 React、MSAL.JS 和 ASP.NET Core 3.0 對 Azure AD 進行身份驗證?

  7. React Virtual Window - 虛擬化任何東西以提高性能!

  1. Thunder Client - 用於 VS Code 的輕量級 Rest API 客戶端擴展

  2. 虛擬助手:新的用戶體驗前沿

  3. 面向初學者的 ReactJs 路線圖🗺 - 2021

  4. 遞歸解釋(帶示例)