序文
まず、検索とは何かを知る必要があります。検索はwindow.locationのプロパティです。例えば:
まず第一に、ここにURLがあります。これはhttp://www.a.com/list/2.html?page=2&color=4&size=3#picです。
このアドレスにアクセスしたら、コンソールを開き、window.locationを入力すると、次の図で結果が表示されます
上記のように、私たちが操作したいのは、上記の写真のボックスの一部です。
なぜこれを操作する必要があるのですか?
たとえば、2番目のページの3番目のページにジャンプする必要がある場合は、上記のページ= 2をページ= 3に更新し、他のパラメーターが保持されていることを確認する必要があります。
または、最初に検索結果はありませんでした(一般リストの最初のページなど、何もありませんでした)が、今ではページ= 2を追加する必要があります。
次に、私が今いるページを知る必要があります。つまり、ページの値を取得する必要があります。
したがって、検索が必要です。これで、フロントエンドとバックエンドから分離され、検索はパラメーター構成の非常に重要な方法です。
建設方法
検索で指定されたパラメーター値を取得します
Baiduを取り、次の方法を見つけました。
関数getQueryString(name){var reg = new regexp( "(^|&)" + name + "=([^&]*)(&| $)"); var r = window.location.search.substr(1).match(reg); if(r!= null)return unscape(r [2]); nullを返します;}メソッドソース:JSを使用してアドレスバーパラメーターを取得する方法
フル機能方法
私はもともと実装のアイデアを書きたいと思っていましたが、しばらく覚えていなかったので、最終的な方法に直接それを渡しました。
関数funcurl(name、value、type){var loca = windoca.location; var baseurl = type == undefined? loca.origin + loca.pathname + "?" : ""; var query = loca.search.substr(1); //パラメーター送信がない場合、返される検索値には疑問符が含まれていない場合(name == undefined){return query} //値伝送がない場合、queryの値を返す場合は、value == undefined) +"=([^&]*)(&| $)"); return val!= null? unescape(val [2]):null;}; var url; if(query == ""){//検索値がない場合は、applurl + name = "=" +値でurlurlを返します;} query.split( "&"); for(var i = 0; i <arr.length; i ++){arr [i] = arr [i] .split( "="); obj [arr [i] [0]] = arr [i] [1];}; json.stringify(obj).replace(/[/"/{/}]/g、" ")。置換(//:/g、" = ")。使い方
funcurl()は完全な検索値を取得します(疑問符は含まれません)
funcurl(name)urlの名前の値を返します(他の人の方法の前の段落を統合)
funcurl(名前、値)検索の名前の値を値に設定し、完全なURLを返します
http://www.a.com/list/2.html?page=2&color=4&size=3#picなどの返品コンテンツ
funcurl(名前、値、タイプ)は3番目のアイテムと同じように機能しますが、これは更新された検索文字列のみを返します
ここのタイプは、1などの任意のキャラクターにすることができます。
コンテンツの例の例ページ= 2&color = 4&size = 3;
一般的にURLからパラメーターを取得し、インターフェイスにドッキングするために使用されます
まとめ
私はもともと、使用する既製のプラグインを見つけたかったのですが、それは大きすぎて理解するのが簡単ではありませんでした。もちろん、それは主に私のレベルがあまりにも貧弱だったためでした。
だから私はそれで遊ぶためにホイールを作りました。コードは十分にエレガントではありませんが、それでも私のニーズを満たしています。より良い提案があれば、私にメッセージを残してください。
実際、それは主にVueで使用されていますが、ここにはVueコンテンツがないため、Vueの一連のチュートリアルとは見なされません。
上記は、編集者が紹介したJavaScript操作URLの検索のいくつかの方法と機能の完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!