快捷導(dǎo)航

JavaScript中Location.search處理使用方法

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

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

Location.search數(shù)據(jù)來源
假設(shè)1.html中有一個表單，其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這種鍵值對的存在形式，每個鍵值對用&隔開

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

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

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

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

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

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

賦值操作無非如下：

 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)，可能會導(dǎo)致不可預(yù)料的錯誤
第一步是定義一個臨時變量來存儲鍵和值的數(shù)組，通過spilt函數(shù)來分開，分別放在pos[0]和pos[1]當(dāng)中
第二步就是分別將這些值放置在對象的數(shù)組當(dāng)中
第三步，計數(shù)器++，完成記錄數(shù)組內(nèi)部數(shù)據(jù)個數(shù)整合

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

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

? ? ? ? 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中每一個元素
? ? ? ? }
? ? ? ? deal_with_key_value(obj, search); //調(diào)用

? ? ? ? return obj; //最終返回值為對象
? ? }


? ? 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: