iT邦幫忙

2

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

我的邏輯要打結了,求大俠幫解開!
https://ithelp.ithome.com.tw/upload/images/20200909/20127425j4uWwTM1Li.png
第一步:當我點擊蘋果的時候,所有價格的蘋果都出現了,理論上url改變成
url: http://test.test/fruit/?fruitValue=蘋果
sql: select * from fruit where fruitValue='蘋果'
https://ithelp.ithome.com.tw/upload/images/20200909/20127425pJlomXaevH.png
第二部:當我再點擊$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解決的嗎...
新手碰壁日常....附上這是我參考的篩選功能圖片
https://ithelp.ithome.com.tw/upload/images/20200909/201274250CV5BnAYVm.png

這是和拼接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感覺有點危險
5
通靈亡
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

感謝你回答我的問題@~@我能問一下
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: '香蕉'
}

問題終於解決了 感謝大濕耐心回答/images/emoticon/emoticon13.gif

1

我只教你基本的原理。最簡單的方式
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;

3
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;
    }

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

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

<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(....)
    });
});

我要發表回答

立即登入回答