POSTデータを送信してJQueryでナビゲートするにはどうすればよいですか？

Question

私のブログでは、コードスニペットを含む<pre>ブロックがたくさんあります。

私は何をしたいことは別のページにその内容を送信するページ上のすべての<pre>の要素に.click()ハンドラを追加である - のは、viewcode.phpそれを呼びましょう - POST経由。

私は$.ajaxを使用してこのページに情報を送信する方法を知っています。私は情報を送信する方法がわかりませんとページに移動します。

訪問者は<pre>をクリックすることができます。これは、コードを読みやすく、簡単にコピー/ペーストするためのコードを含む別のページに移動します。

私は解決策がシンプルで分かりやすいと感じていますが、私はそれについて考えることはできません。

Answer 1

ない私はそれをこのように扱うと確信：あなたは、ホバーのdivまたはjQueryプラグインを使用しているポップのアップとpre要素から取得したコードのクリーナー部分を示し、のようなものにしたいかもしれませんページを残すのではなく、コードでダイアログをポップアップするだけですが、javascriptを使用してフォームを作成し、AJAXを使用する代わりにそのフォームで送信をトリガーすることで、これを処理できます。

jQueryのUIとのダイアログを使用：

$('pre').on('click', function() { 
     $('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({ 
      ... set up dialog parameters ... 
     }); 
}); 

は

$('pre').on('click', function() { 
     var text = $(this).text(); 
     $('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>') 
      .appendTo('body'); 
     $('[name="code"]').val(text); 
     $('.hidden-form').submit(); 
}); 

Answer 2

非表示の<form>要素を使用できます。次に属性の<pre>を設定して、<pre>の値をフォームにコピーします。オプションで、action属性を設定して、情報を送信するページを選択することができます。最後に、そのフォームを提出してください。

私はそれがエレガントではないことは知っていますが、うまくいくでしょう。

Answer 3

コードスニペットがデータベースまたはファイルのどこかに保存されている場合、スニペットをいくつかの識別子に基づいて取得するページにスニペットをリンクすることをおすすめします。

スニペットがHTMLにのみ含まれていて、よりクリーンな方法で表示したい場合は、Ajaxの投稿は必要ありません。私はおそらく、

$('pre').click(function() { 
    var code = $(this).html(); //this is the pre contents you want to send 
    $('#hoverDiv').html(code).show(); 
}); 

Answer 4

フォームを構築はい、あなたはフォームを作成し、それを提出しなければなりません。あなたはajax投稿/取得であらゆる種類のことを行うことができますが、投稿結果に移動する唯一の方法は実際のフォーム投稿を使用することです。ここでの簡潔なバージョンは次のとおりです。

$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit(); 

私のコードは、この行います

// Navigate to Post Response, Convert first form values to query string params: 
// Put the things that are too long (could exceed query string limit) into post values 
var form = $('#myForm'); 
var actionWithoutQueryString = form[0].action.split("?")[0]; 
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray()); 
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n"); 
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();