2

URL から変数を収集し、それらを配列に挿入して、href URL を動的に変更する方法は?

私は開発者ではないので、ここで私を甘やかしてください! 私は HTML に精通しており、さまざまなソースからコードのスニペットを取得してそれらを組み合わせることは得意です。このようなブログで助けを求めることにしたのはこれが初めてです。周りを見回していて、必要なものが正確に見つからないように見えるからです。非常に近いですが、これまでのところ..助けてください!

私がやりたいことは次のとおりです。

  1. このような URL から変数を収集します ( wwww.myurl.com/index.html?var1=1&var2=2&var3=3etc. etc..)

  2. これらの変数を取得して、不要な部分を取り除きながら配列に挿入します。私はこのコードを見つけましたが、それを取得しますが、画面に出力しますが、これは必要ありません..

    myurl.com/index.html?log=1&pass=2
    

    function addComment()
    {
        var parameters = location.search.substring(1).split("&");
    
        var temp = parameters[0].split("=");
        l = unescape(temp[1]);
    
        temp = parameters[1].split("=");
        c = unescape(temp[1]);
    
        document.getElementById("log").innerHTML = l;
        document.getElementById("pass").innerHTML = c;
    }
    addComment();
    
    
    <p>http://www.myurl.com/</b><span id="log" ></span></p>
    <p>http://www.myurl.com/</b><span id="pass"></span></p>
    
    </script>
    
  3. URL から収集されたパラメーターに基づいて、その場で href タグを動的に変更します。

URL を変更するのに最適なこのコードを見つけましたが、(a) 変数は入力フォームから収集され、URL から変数を取得できる必要があります。(b) それらのいくつか (20 のようなもの) も必要なので、配列が必要です。

<input type="text" id="mySearchBox" />
<a href="http://www.myurl.com/index.html?" onclick="this.href+=+document.getElementById('mySearchBox').value">Enter Parameter</a>

(編集コード形式)


テクノロジーに関して...私は特定の言語や方法に固執していませんが、javascriptとjqueryが私にとって最も簡単なようです。私はPHPやその他の言語をあまり扱っていません。あなたが提供できるダミーの最も簡単な方法は、より良いものです。

これはあなたにとって小学校のようなものだと思いますが、私はそれを理解できないようですので、あなたのアドバイスは大歓迎です!

4

2 に答える 2

1

Javascript & jQuery

addComment 関数の最初の行は、url から searchsrtstring を取得します。ハッシュ (#) まで (ハッシュなし)、またはハッシュがない場合は最後まで。

その後、最初の文字 (?) は で削除されsubstr(1)ます。最後に、文字列は "&" ごとに で分割され.split("&")ます。分割されたすべてのパーツは配列に格納されます。これを例に適用すると:

www.myurl.com/index.html?var1=1&var2=2&var3=3

なる

["var1=1", "var2=2", "var3=3"]

この配列は、変数パラメーターに格納されます。次に、配列の最初の要素が「=」文字で分割されます。我々が得る

temp = ["var1", "1"]

temp の 2 番目の要素はエスケープされていません (%20 などの URL の特殊文字を " " (スペース) にデコードするため)。

そのオブジェクトを作成するには、まず空のオブジェクトを作成してから、次のように入力します。

var obj = {};

obj[ temp[0] ] = temp[1];

パラメーターのすべての要素を使用して for ループでこれを行うと、次のようになります。

obj = { var1 : 1, var2 : 2, var3 : 3 }

欲しかったオブジェ。これは非常に単純なパーサーであり、より複雑な値に対しては適切に機能しない場合があります。上記の完全なコードは次のとおりです。

function getUrlObj() {
  var parameters = location.search.substring(1).split("&");
  var obj = {};
  for( var i = 0; i < parameters.length; ++i) {
    var tmp = parameters[i].split("=");
    obj[ tmp[0] ] = unescape( tmp[1] );
  }
  return obj
}

今すぐリンクに:

あなたの例では、リンクの onclick イベントがロードされる URL を決定します。このように、ブラウザのステータス バーには正しい宛先が表示されず、デバッグが難しく、ユーザー フレンドリーではなくなります。別のアプローチ (jQuery を使用) は、ページからすべてのリンクを収集し、URL に従ってそれらの href タグを変更することです。これは、ページ (または DOM の方が適切) が読み込まれた後に実行できます。jquery の例は次のようになります。

$( function() { //called when dom is ready
  //get url object
  var urlObj = getUrlObj();
  //find all <a> elements on page
  // iterate over elements
  $('a').each(function() {
    // change attribute href
    $(this).attr('href', 'new url goes here');
  });
});

url オブジェクトの一部を新しい url に挿入したいと思います。href 属性の初期値は? 最終的にどのように見えるべきですか?

初期値は、URL をどのように変更する必要があるかを示している場合があります。属性の値は、j​​query のメソッドでアクセスできます.attr('href')(2 番目の引数は値を変更します)。

メソッド (およびその他)の詳細な説明は.attr()、jquery のドキュメント ( http://api.jquery.com/attr/ ) にあります。

すべてのリンク要素を変更したくない場合は、次のように、変更するリンクにクラスを適用できます。

<a class="modify" href...

$('.modify')の代わりに (ドット付き) でそれらの要素にアクセスし $('a')ます。

PHP

php でそれを行いたい場合、php は URL クエリ文字列をネイティブに処理できるため、コードははるかに単純になる可能性があります。例:

<a href="<?php echo $_GET["var1"]; ?>.php">link</a>

あなたの例で「1.php」へのリンクになります。

UPDATE:(コメントでの議論によると)

検索クエリ?iframe1=1&banner1=1&button1=1&button2=2&button3=3は、URL とともにサーバーに送信されます。上記で指摘したように、PHP はマジック変数$_GETを介して検索クエリの値に直接アクセスできます。$_GET['button1'] は 1 になります。

変数を使用するには、ファイルの末尾を .php にする必要があります。これにより、サーバーはファイルの内容を評価する必要があることを認識します。結果のファイルは、通常の html ファイル (末尾が php のファイル) になります。

書き込み<?phpは、次のテキストまで?>が php コードであることを示します。結果のhtmlファイルecho "something";に文字列を出力します。somethingドキュメントに何かを印刷するためのショートカットは<?="text" ?>. 文字列の代わりに、変数を出力できます: <?=$somevar ?>.

これを例に適用すると、html ファイルは次のように更新する必要があります。

<a target="theiframe" href="www.mysite.com/redirect2external?<?=$_GET['button1'] ?>">a link</a>
<a target="theiframe" href="www.mysite.com/redirect2external?<?=$_GET['button2'] ?>">another link</a>

等々。iframe (またはバナー) についても同様です。

<iframe name="theiframe" src="www.mysite.com/redirect2external?<?=$_GET['iframe1'] ?>"/>

すべての html ファイルを 1 つの php ファイルに結合するもう 1 つの (より良い) 方法は、ページを表す数値または文字列を使用することです。例?page=somepage(特殊文字やスペースは避けてください。正しく機能しない可能性があります)。

php ファイルには、すべてのページのスイッチがあります。

<?php if( $_GET['page'] == "somepage" ) { ?>
  <a target="theiframe" href="www.mysite.com/redirect2external?1">a link</a>
  <a target="theiframe" href="www.mysite.com/redirect2external?2">another link</a>
<?php } elseif( $_GET['page'] == "someotherpage" ) { ?>
  <a target="theiframe" href="www.mysite.com/redirect2external?3">a link</a>
  <a target="theiframe" href="www.mysite.com/redirect2external?4">another link</a>
<?php } //and so on (btw this is a php comment) ?>

このアプローチの利点は次のとおりです。

  1. 短い URL
  2. 最初のアプローチでは、後で新しいボタンが追加された場合、そのページへのすべてのリンクを変更して、url に buttonx=x を追加する必要があります。また、誰かが (古い URL の) ブックマークを使用してそのサイトに移動した場合、追加のボタンは機能しません。
于 2012-09-17T08:09:29.700 に答える
1

クエリ文字列の読み取りと変更のための優れた jQuery プラグイン: http://archive.plugins.jquery.com/project/query-object

それを使用して仕事を終わらせたり、ソースを調べて質問への回答を得たりしてください。

于 2012-09-16T22:35:34.600 に答える