實現篩選功能前端呈現問題 SQL HTML

sql 篩選 php

samkwok123 2020-09-09 02:36:46 ‧ 3923 瀏覽

分享至

我的邏輯要打結了，求大俠幫解開！

第一步:當我點擊蘋果的時候，所有價格的蘋果都出現了，理論上url改變成
url: http://test.test/fruit/?fruitValue=蘋果
sql: select * from fruit where fruitValue='蘋果'

第二部：當我再點擊$100時，只剩下$100的蘋果，理論上url會改變
url: http://test.test/fruit/?fruitValue=蘋果&priceValue=$100
sql: select * from fruit where fruitValue='蘋果' and priceValue='$100'
·················問題······················
當我把水果改變成香蕉的時候，url要怎樣才能消除蘋果的值，然後貼上香蕉的值，而且保留$100的值呢？
url應該會變成: http://test.test/fruit/?priceValue=$100&fruitValue=香蕉
sql: select * from fruit where fruitValue='香蕉' and priceValue='$100'

目前使用的是PHP JS HTML ，我看到一門叫Mybatis的語言，上面的問題是用Mybatis解決的嗎...
新手碰壁日常....附上這是我參考的篩選功能圖片

samkwok123 iT邦新手 5 級 ‧ 2020-09-09 02:42:46 檢舉

這是和拼接url參數有關嗎

fillano iT邦超人 1 級 ‧ 2020-09-09 03:02:15 檢舉

MyBatis不是一個語言，他是一個MVC裡面屬於Model這部分的框架。你的問題純粹只是怎樣用JS去改url裡面的query string的問題。

Franky Chen iT邦研究生 3 級 ‧ 2020-09-10 10:21:25 檢舉

注意一下sql injection感覺有點危險

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

通靈亡

iT邦高手 1 級 ‧ 2020-09-09 08:37:49

你可以在任何的Checkbox上，加上JS偵聽事件
只要勾選某一個CheckBox，修改目前的網址並加上所有已打勾的Query String
這樣子設計，不管是單選或複選皆可以處理

Sample 程式碼：
JS Fiddle

<body>
    <input type="checkbox" 
           onchange="filterData(event, 'friut', '蘋果')">
    <input type="checkbox" 
           onchange="filterData(event, 'price', '300')">
</body>

<script>
    var checkBoxMap = {
        friut: {

        },
        price: {

        }
    };

    function filterData(e, checkBoxMapType, checkBoxText) {
        // 更新要篩選的項目
        var value = e.target.checked;

        if (value === true) {
            checkBoxMap[checkBoxMapType][checkBoxText] = true;
        }
        else {
            delete checkBoxMap[checkBoxMapType][checkBoxText];
        }

        // 查詢與更新畫面
        updateView();
    }

    function updateView() {
        // 更新網址與畫面
    }
</script>

接著選擇一個方法進行跳轉或畫面更新的步驟：

一、每一次重新載入頁面：更新網址→重新載入

使用Window.location.href 轉到加上查詢參數的網址

// 取得當前URL
var url = new URL(window.location.href);

// 清掉網址上所有的查詢參數
url.search = '';

// 加上需要的查詢參數
url.searchParams.set('id2', '101');
        
// 跳轉到加上查詢參數的網址
window.location.href = url.toString();

以上方式請參考
https://usefulangle.com/post/81/javascript-change-url-parameters

二、不用重新載入頁面，並保有歷史紀錄：修改網址的參數→用Push State更新網址→Call AJAX

如果你PHP的資料查詢的邏輯有獨立成一支API
你可以用AJAX獨立Call那支API取得資料後，丟回前端渲染並更新網址
一方面不需要重新整理網頁，另一方面使用者按上一頁可以存取得到之前篩選的查詢結果

方式請參考
https://zgadzaj.com/development/javascript/how-to-change-url-query-parameter-with-javascript-only

回應 3
分享
檢舉

samkwok123 iT邦新手 5 級 ‧ 2020-09-10 22:29:16 檢舉

感謝你回答我的問題@~@我能問一下
checkBoxMap[checkBoxMapType][checkBoxText] = true;
和checkBoxMap[checkBoxMapType]=checkBoxText;
會導致怎樣的結果不同嗎？

通靈亡 iT邦高手 1 級 ‧ 2020-09-11 07:51:40 檢舉

第一種:

checkBoxMap[checkBoxMapType][checkBoxText] = true;

例如你勾選蘋果和香蕉時，會得到下方的JSON
這樣設計不管單選或複選都可以處理

{
    fruit: {
        '蘋果': true,
        '香蕉': true
    }
}

第二種:

checkBoxMap[checkBoxMapType] = checkBoxText;

這樣設計適合用在單選
例如勾選蘋果之後，再勾選香蕉時，先後會分別得到兩個不同的JSON

{
    fruit: '蘋果'
}

{
    fruit: '香蕉'
}

samkwok123 iT邦新手 5 級 ‧ 2020-09-13 04:52:36 檢舉

問題終於解決了感謝大濕耐心回答

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-09-09 09:16:44

我只教你基本的原理。最簡單的方式
url的組合法。

將網址跟傳送值分開
傳送值用一個物件處理。因為只有物件可以用英文key。

如

url = 'http://abc.com';
getData = {"fruitValue":"","priceValue":""};

getData.fruitValue = 'AAA';
getData.priceValue = '$100';

postUrl = url+'?fruitValue='+getData.fruitValue+'&priceValue='+getData.priceValue;

////////////////////
getData.fruitValue = 'BBB';
postUrl = url+'?fruitValue='+getData.fruitValue+'&priceValue='+getData.priceValue;

回應
分享
檢舉

登入發表回應

japhenchen

iT邦超人 1 級 ‧ 2020-09-09 11:06:56

把KEY放在的TITLE裡或ALT裡
如

<div class="fruit" title="蘋果">蘋果的內容</div>
<div class="fruit" title="香蕉">香蕉的內容</div>
<div class="fruit" title="芭樂">芭藥的內容</div>
<div class="fruit" title="西瓜">西瓜的內容</div>

我個人喜好用jQuery

$(document).ready(function(){
    $(".fruit").on("click",function(){
        var whatfruit = $(this).attr('title');
        window.location.href = `yourpage.php?fruitkind=${whatfruit}`;
        // 或window.open(....)
    });
});

CSS修飾一下讓DIV class='fruit'看起來像是＜a href＞的樣子

.fruit {
    cursor: pointer;
}
    .fruit:hover{
        text-decoration: underline;
        color:purple;
    }

回應 2
分享
檢舉

japhenchen iT邦超人 1 級 ‧ 2020-09-09 11:09:58 檢舉

很多javascript framework都能這樣做，你想用原生javascript做到也沒問題，只是會寫很多行而已

japhenchen iT邦超人 1 級 ‧ 2020-09-09 11:16:54 檢舉

我真的漏看到你還要加價格，那也不難，把價格加上去

<input type="radio" class="price" value="100">100元<br>
<input type="radio" class="price" value="200">100元<br>
<input type="radio" class="price" value="300">100元<br>

一樣用jquery取價格值

$(document).ready(function(){
    $(".fruit").on("click",function(){
        var whatfruit = $(this).attr('title');
        var howmanyprice = $('input[class='price']:checked').val();
        var url = `yourpage.php?fruitkind=${whatfruit}&price=${howmanyprice}`;
        window.location.href = url;
        // 或window.open(....)
    });
});

登入發表回應