快捷導(dǎo)航

JavaScript中Location.search處理使用方法

更新時(shí)間：2023年04月24日 10:22:11 作者：hengpro

本文主要介紹了JavaScript中Location.search處理使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Location.search數(shù)據(jù)來(lái)源
假設(shè)1.html中有一個(gè)表單，其action屬性為2.html，則在該表單提交后跳轉(zhuǎn)至2.html進(jìn)行后續(xù)處理

Loction.search數(shù)據(jù)格式
location.search的數(shù)據(jù)格式是這樣的：?key1=key_value1&key2=key_value2&key3=key_value3&......&keyn=key_valuen
由？開頭，接著是key=key_value這種鍵值對(duì)的存在形式，每個(gè)鍵值對(duì)用&隔開

Loction.search的初步處理
用到以下幾個(gè)函數(shù)：substr() split()
首先用substr()處理掉最前面的?:var first_deal=location.serach.substr(1);這樣就去掉了最前面的?
然后再通過(guò)split()，利用鍵值對(duì)之間使用’&'隔開的特點(diǎn)將鍵值對(duì)分開放入字符串?dāng)?shù)組當(dāng)中var second_deal=first_deal.split('&');

最后整合成一個(gè)精簡(jiǎn)的句子：var search=location.search.substr(1).split('&');，這可以去掉？并將鍵值對(duì)分開

Location.search處理結(jié)果的存儲(chǔ)方式
從C語(yǔ)言數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)中汲取到了靈感：順序存儲(chǔ)線性表—我構(gòu)建了一個(gè)對(duì)象，由兩個(gè)數(shù)組和一個(gè)數(shù)字常量構(gòu)成

function key_value_obj() {
        this.key = [];
        this.keyvalue = [];
        this.counter = 0;
    }

第一個(gè)數(shù)組當(dāng)中存放key，第二個(gè)數(shù)組用于存放key_value,而counter當(dāng)中則是存放鍵值對(duì)的數(shù)量，起到一個(gè)計(jì)數(shù)器的作用

再接著是給這個(gè)對(duì)象中的數(shù)組賦值的操作

賦值操作無(wú)非如下：

 function deal_with_key_value(obj, key_and_value) {
            for (var i = 0; i < key_and_value.length; i++) {
                var pos = key_and_value[i].split('=');
                obj.key[i] = pos[0];
                obj.keyvalue[i] = pos[1];
                obj.counter++;
            }

循環(huán)體：用for循環(huán)遍歷，這里提一嘴的原因是，建議不要使用for-in循環(huán)，可能會(huì)導(dǎo)致不可預(yù)料的錯(cuò)誤
第一步是定義一個(gè)臨時(shí)變量來(lái)存儲(chǔ)鍵和值的數(shù)組，通過(guò)spilt函數(shù)來(lái)分開，分別放在pos[0]和pos[1]當(dāng)中
第二步就是分別將這些值放置在對(duì)象的數(shù)組當(dāng)中
第三步，計(jì)數(shù)器++，完成記錄數(shù)組內(nèi)部數(shù)據(jù)個(gè)數(shù)整合

? ? function deal_with_locationsearch() {
? ? ? ? var search = location.search.substr(1).split('&'); //初步處理數(shù)據(jù)-->去掉?分開多個(gè)鍵值對(duì)

? ? ? ? function key_value_obj() {
? ? ? ? ? ? this.key = []; //鍵數(shù)組
? ? ? ? ? ? this.keyvalue = []; //值數(shù)組
? ? ? ? ? ? this.counter = 0; //計(jì)數(shù)器，用于存儲(chǔ)數(shù)據(jù)數(shù)量
? ? ? ? } //數(shù)據(jù)存儲(chǔ)方式-->順序存儲(chǔ)，線性表
? ? ? ? var obj = new key_value_obj();
? ? ? ? //創(chuàng)建對(duì)象

? ? ? ? function deal_with_key_value(obj, key_and_value) {
? ? ? ? ? ? for (var i = 0; i < key_and_value.length; i++) {
? ? ? ? ? ? ? ? var pos = key_and_value[i].split('=');
? ? ? ? ? ? ? ? obj.key[i] = pos[0];
? ? ? ? ? ? ? ? obj.keyvalue[i] = pos[1];
? ? ? ? ? ? ? ? obj.counter++;
? ? ? ? ? ? } //遍歷location.search中每一個(gè)元素
? ? ? ? }
? ? ? ? deal_with_key_value(obj, search); //調(diào)用

? ? ? ? return obj; //最終返回值為對(duì)象
? ? }


? ? var obj = deal_with_locationsearch();

//使用效果

? ? var c = '';
? ? for (i = 0; i < obj.counter; i++) {
? ? ? ? var d = obj.key[i] + '=' + obj.keyvalue[i];
? ? ? ? c += d;
}
console.log(c);
```

到此這篇關(guān)于JavaScript中Location.search處理使用方法的文章就介紹到這了,更多相關(guān)JavaScript Location.search內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: