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

鍊式 AJAX 選擇

在今天的教程中,我們將構建一組鍊式選擇元素。在其中一個選項中選擇一個選項將觸發頁面更新,向您顯示更多選項以優化您的選擇。我們將使用 PHP 描述選項服務器端,因此您可以輕鬆地將今天的示例掛鉤到數據庫。

本教程的想法是由丹麥的 Casper Hansen 提出的。

HTML

正如您從下面的屏幕截圖中看到的那樣,選擇框附有一個標題,說明了選擇的含義。標題和選擇框包含在一個 LI 項中。

添加更多問題時,jQuery 會創建額外的 LI。所有這些都位於一個名為 #questions 的無序列表中 .這些項目的標題和選項以 JSON 格式提供,正如您將在 tut 的 PHP 部分中看到的那樣。這是為 li 項目生成的標記:

index.html - 生成的代碼

<ul id="questions">
    <!-- Generated by jQuery -->
    <li>
        <p>What would you like to purchase?</p>
        <select data-placeholder="Choose a product category">
            <option data-connection="phoneSelect" value="Phones">Phones</option>
            <option data-connection="notebookSelect" value="Notebooks">Notebooks</option>
            <option data-connection="tabletSelect" value="Tablets">Tablets</option>
        </select>
    </li>
    <!-- The next sections are inserted here depending on the choices above -->
</ul>

您可能會在演示頁面中註意到我們沒有使用默認的瀏覽器選擇控件。這是因為我們正在使用 Chosen jQuery 插件將我們的選擇升級為您看到的精美小部件。我們只需要調用 chosen() 方法上的選擇,插件將處理其餘的。

jQuery 代碼

簡而言之,這是我們的 jQuery 代碼所做的事情 - 它從服務器獲取選擇框信息作為 JSON,生成它們的 HTML,並為選擇更改設置事件偵聽器。如果選擇確實發生了變化,則會對新的選擇項重複該過程。

在代碼中,這是使用兩個 JavaScript 函數實現的:

  • 刷新選擇 每次向頁面添加項目時觸發 Chosen 插件並綁定事件監聽器;
  • fetchSelect 從服務器請求 JSON 提要並從響應中生成標記。

你可以在下面看到它們。

assets/js/script.js

$(function(){

    var questions = $('#questions');

    function refreshSelects(){
        var selects = questions.find('select');

        // Improve the selects with the Chose plugin
        selects.chosen();

        // Listen for changes
        selects.unbind('change').bind('change',function(){

            // The selected option
            var selected = $(this).find('option').eq(this.selectedIndex);
            // Look up the data-connection attribute
            var connection = selected.data('connection');

            // Removing the li containers that follow (if any)
            selected.closest('#questions li').nextAll().remove();

            if(connection){
                fetchSelect(connection);
            }

        });
    }

    var working = false;

    function fetchSelect(val){

        if(working){
            return false;
        }
        working = true;

        $.getJSON('ajax.php',{key:val},function(r){

            var connection, options = '';

            $.each(r.items,function(k,v){
                connection = '';
                if(v){
                    connection = 'data-connection="'+v+'"';
                }

                options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
            });

            if(r.defaultText){

                // The chose plugin requires that we add an empty option
                // element if we want to display a "Please choose" text

                options = '<option></option>'+options;
            }

            // Building the markup for the select section

            $('<li>\
                <p>'+r.title+'</p>\
                <select data-placeholder="'+r.defaultText+'">\
                    '+ options +'\
                </select>\
                <span class="divider"></span>\
            </li>').appendTo(questions);

            refreshSelects();

            working = false;
        });

    }

    $('#preloader').ajaxStart(function(){
        $(this).show();
    }).ajaxStop(function(){
        $(this).hide();
    });

    // Initially load the product select
    fetchSelect('productSelect');
});

偉大的!現在剩下的就是生成實際的 JSON 提要了。注意 fetchSelect 函數接受一個字符串參數。這是我們將傳遞回 PHP 的鍵,表示我們想要哪組項目。

這是我們的 PHP 腳本的示例響應:

{
    "items": {
        "Phones": "phoneSelect",
        "Notebooks": "notebookSelect",
        "Tablets": ""
    },
    "title": "What would you like to purchase?",
    "defaultText": "Choose a product category"
}

提取選擇 循環遍歷項目並將鍵用作選項元素的內容,將值用作連接。手機和筆記本電腦會導致腳本生成新的選擇框,而平板電腦不會。

PHP

我們需要以某種方式存儲有關選擇框、它們包含的選項以及它們之間的連接的信息。對於數據庫,這可以通過選擇一組特定的行來完成。但在這裡,我們將這些數據靜態存儲為對象。為此,我們將定義一個簡單的類來保存選擇框的信息:

ajax.php / 1

// Each select box will be an instance of this class

class SelectBox{
    public $items = array();
    public $defaultText = '';
    public $title = '';

    public function __construct($title, $default){
        $this->defaultText = $default;
        $this->title = $title;
    }

    public function addItem($name, $connection = NULL){
        $this->items[$name] = $connection;
        return $this;
    }

    public function toJSON(){
        return json_encode($this);
    }
}

現在我們只需要為每個選擇框創建一個此類的實例,並調用 addItem() 添加選項。這個方法有一個可選的 $connection 參數,它保存了一個依賴選擇框的名稱。

ajax.php / 2

/* Configuring the selectboxes */

// Product selectbox

$productSelect = new SelectBox('What would you like to purchase?','Choose a product category');
$productSelect->addItem('Phones','phoneSelect')
              ->addItem('Notebooks','notebookSelect')
              ->addItem('Tablets','tabletSelect');

// Phone types

$phoneSelect = new SelectBox('What kind of phone are you interested in?', 'Pick a phone type');
$phoneSelect->addItem('Smartphones','smartphoneSelect')
            ->addItem('Feature phones','featurephoneSelect');

// Smartphones

$smartphoneSelect = new SelectBox('Which is your desired smartphone?','Choose a smartphone model');
$smartphoneSelect->addItem('Samsung Galaxy Nexus')
                 ->addItem('iPhone 4S','iphoneSelect')
                 ->addItem('Samsung Galaxy S2')
                 ->addItem('HTC Sensation');

// Feature phones

$featurephoneSelect = new SelectBox('Which is your desired featurephone?','Choose a feature phone');
$featurephoneSelect->addItem('Nokia N34')
                   ->addItem('Sony Ericsson 334')
                   ->addItem('Motorola');

// iPhone colors

$iphoneSelect = new SelectBox('What color would you like?','Choose a color');
$iphoneSelect->addItem('White')->addItem('Black');

// Notebook select

$notebookSelect = new SelectBox('Which notebook would you like to buy?', 'Choose a notebook model');
$notebookSelect->addItem('Asus Zenbook','caseSelect')
               ->addItem('Macbook Air','caseSelect')
               ->addItem('Acer Aspire','caseSelect')
               ->addItem('Lenovo Thinkpad','caseSelect')
               ->addItem('Dell Inspiron','caseSelect');

// Tablet select

$tabletSelect = new SelectBox('Which tablet would you like to buy?', 'Pick a tablet');
$tabletSelect->addItem('Asus Transformer','caseSelect')
             ->addItem('Samsung Galaxy Tab','caseSelect')
             ->addItem('iPad 16GB','caseSelect')
             ->addItem('iPad 32GB','caseSelect')
             ->addItem('Acer Iconia Tab','caseSelect');

// Case select

$caseSelect = new SelectBox('Buy protective casing?','');
$caseSelect->addItem('Yes')->addItem('No');

// Register all the select items in an array

$selects = array(
    'productSelect'         => $productSelect,
    'phoneSelect'           => $phoneSelect,
    'smartphoneSelect'      => $smartphoneSelect,
    'featurephoneSelect'    => $featurephoneSelect,
    'iphoneSelect'          => $iphoneSelect,
    'notebookSelect'        => $notebookSelect,
    'tabletSelect'          => $tabletSelect,
    'caseSelect'            => $caseSelect
);

上面的代碼定義了一些選擇項並將它們放在 $selects 中 大批。當這個腳本收到一個 AJAX 請求時,它會查看這個數組並返回一個響應:

ajax.php / 3

// We look up this array and return a select object depending
// on the $_GET['key'] parameter passed by jQuery

// You can modify it to select results from a database instead

if(array_key_exists($_GET['key'],$selects)){
    header('Content-type: application/json');
    echo $selects[$_GET['key']]->toJSON();
}
else{
    header("HTTP/1.0 404 Not Found");
    header('Status: 404 Not Found');
}

通過調用 toJSON() 我們一開始定義的方法,我們將選擇對象的所有數據輸出為 JSON,供我們的 jQuery 前端使用。

這樣我們的鍊式 AJAX 選擇示例就完成了!

完成

您可以使用此示例來增強用戶指南、產品推薦或搜索頁面。升級腳本以使用實時數據庫很簡單,它實際上會簡化 PHP 腳本。


Tutorial JavaScript 教程
  1. 個人網站評論

  2. 構建 Vuex 的聰明方法

  3. Scrimba JavaScript 乘客計數器應用程序

  4. PolyFull - 增強 js 功能

  5. 深入了解 ES6:生成器,續

  6. JavaScript 中最快的 MD5 實現

  7. 連接 cypress 和 react devtools 的最簡單方法🌟

  1. ⚔️ 開源 v/s cPaaS ⚔️ - 構建實時視頻應用程序的架構選擇。

  2. 從 Github 部署 React 應用程序到 Netlify [A Walk-through]

  3. 取消選擇具有多個和 optgroup 的選擇菜單中的選定選項

  4. JavaScript 挑戰 6:將字符串轉換為駝峰式大小寫

  5. 創建一個 HTMLCollection

  6. 在 Vue 3 中構建具有動態插槽名稱的表格組件

  7. 變量(元素).style 未定義

  1. 使用 DomLog 將 JavaScript 對象記錄到 HTML

  2. 🍝 使用 Next.js (React)、GraphQL、Strapi 和 Stripe 製作 Deliveroo 克隆 - 🏗️ 設置(第 1/7 部分)

  3. 帶有 Chakra UI Vue 和調色板切換的那個

  4. WordPress 5.5 的新功能——深入了解(史詩)版本