GETメソッドを使用してフォームを送信し、URIテンプレートを使用する方法は？

Question

私はこの記事を読むhttp://blog.welldesignedurls.org/2007/01/11/proposing-uri-templates-for-webforms-2/ URIテンプレートについては、それは死んだプロジェクトのようです。

このようにフォームを提出するにはどうすればよいですか？奇数URLに転送しsubmiting後

<form action="/orders/{id}" method="get"> 
    <input type="text" name="id"/> 
    <input type="submit" value="Submit"/> 
</form> 

形式：？/受注/％7Bid％7Dのid = 1

Answer 1

あなたはaction属性を閉じることを忘れ。

<form action="/orders/{id}" method="get"> 
    <input type="text" name="id"/> 
    <input type="submit" value="Submit"/> 
</form> 

とescape()機能を使用{}を渡すため。

例

$queryString = "/orders/{id}"; 
$safeQueryString = escape($queryString); 

<form action="<?=$safeQueryString?>" method="get"> 

峠フォームID

$('input[type="submit"]').on('click',function(e) 
{ 
    e.preventDefault(); 
    var forms = $(this).parents('form'); 
    var formID = forms.attr('id'); 

    //appending form id to form action 
    var dataString = forms.serialize()+'&formID='+formID; 

    forms.submit(); 

}); 

Answer 2

あなたは、GETメソッドを使用することはできますが、URLに名前と値のペアを取得します、そして、それは取得しませんテンプレートをアップ。あなたは、このフォームに "5" と入力した場合：？オン提出

<form action="/orders" method="get"> 
    <input type="text" name="id"/> 
    <input type="submit" value="Submit"/> 
</form> 

、あなたはID = 5 URL /注文を取得し、ではない/受注/ 5ます。

すると、あなたが/受注/ 5を探しているなら、いくつかのjQueryを使って簡単に十分に行うことができます。

<script type="text/javascript" language="javascript"> 
$("form").submit(function() { 
    // prevent the default GET form behavior (name-value pairs) 
    event.preventDefault(); 

    // Get the action attribute 
    var action = $("form").attr("action").toLowerCase(); 

    // For each form element found, replace {elementName} in the action attribute to build a URL from template 
    var values = $("form").serialize().split("&"); 
    for (var i = 0; i < values.length; i++) { 
     var tokens = values[i].split("="); 
     action = action.replace("{" + tokens[0].toLowerCase() + "}", tokens[1]); 
    } 

    // Send the user off to the URL w/ template elements replaced 
    window.location.href = action; 
}); 
</script> 

あなたは、いくつかは、おそらくエスケープ追加し、テンプレート入力されたときの状態を処理しなければなりませんいくつかの他の辺のケースをテストするかもしれませんが、上記のコードは基本的なケースで任意の数のテンプレート要素で動作し、上記の/ orders/5を取得します。