2012-01-17 13 views
0

似たような話題があることは知っていますが、まだ解決策は得られていません。 $.postメソッドをサーバーに送信する前に、URLを変更して(ユーザーがURLを互いに共有できるように)、ページを再読み込みせずに送信します。どうやってするの ?ページをリロードするまでのURLを変更する

編集:つまり、$.postの方法でページに表示されているデータをフィルタリングする必要があります。また、ユーザーがコピーできるURLを変更したいと考えています。

+0

、あなたが使用できるHTML5の[ 'History.pushState'](http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate) 。 –

+0

しかしこれは、現在のURLではなく履歴を変更します。 – Armin

+0

@Armin:履歴にプッシュすることなく現在のURLを変更するだけの['History.replaceState'](https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_replaceState().C2A0method)があります。 –

答えて

0

これはできません。リロードせずに変更できるURLの唯一の部分は、#(ハッシュa.k.a.フラグメント)の後の部分です。前の休憩は新しい(または古い)URLの読み込みを開始します。

あなたは、以下のJavaScriptで(リロードして)、それを変更することができます。

location.href = 'http://www.whatever.com'; 
+0

フォーム要素の 'action'属性を変更することはできませんか? –

+0

彼は何を望んでいますか? – Armin

+0

私はそれを間違って読んでいるかもしれませんが、実際に投稿する前に 'POST'アクションのURLを変更したいと思うようです。 –

2

をユーザーが最新のブラウザ(IEではありませんほとんど何でも)を使用している場合は、新しいHTML5 history methodsを使用することができます。具体的には、history.replaceState

replaceState()は、再ロードせずにページのURLを変更します。

$.post('/some/url/', {some: data}, function(d){ 
    // Do whatever with the returned data... 

    // Change page URL 
    history.replaceState({}, '', '/some/url/'); 
}); 

それとも、データをロードする前にURLを変更することができます:あなたはこのようにそれを使用することができます

// Change page URL 
history.replaceState({}, '', '/some/url/'); 
// load page data 
$.post('/some/url/', {some: data}, function(d){ 
    // Do whatever with the returned data... 
}); 

replaceStateの例については、ここに行く:https://github.com/features/projectsを、そして4つのタブをクリックします。 URLの変更を見ますが、履歴に何も追加されません:-)

+0

ありがとう、私はそれを試してみましょう。したがって、ユーザーがIEを使用する場合、URLは変更されませんか? – Tony

+0

@トニー:いいえ。 'history.replaceState'はIEでは動作しません。 'replaceState'呼び出しの周りに' if(!!(window.history && window.history.replaceState)) 'を追加してください。 –

0

多分これはあなたが望むものですか?最近のブラウザで

<body> 
    ... 
    <div id='urltocopy'></div> 
    ... 
</body> 

function doPost() { 
    $('#urltocopy').html('<a href="http://newurltocopy">Please copy</a>'); 

    $.ajax({ 
      type: 'POST', 
      url: urlStr, 
      dataType: 'html', 
      success: function(data) { 

      }, 
      data: {}, 

     }); 
}