Come inviare il modulo con il metodo GET e utilizzando il modello URI?

Question

Ho letto questo articolo http://blog.welldesignedurls.org/2007/01/11/proposing-uri-templates-for-webforms-2/ sui modelli URI ma sembra un progetto morto.

Quindi ci sono comunque per inviare moduli come questo?

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

La forma dopo submiting in avanti per un URL strano:? /ordini /% 7Bid% 7D id = 1

Answer 1

si dimentica di chiudere l'attributo action.

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

e per il passaggio {} utilizzare la funzione escape().

Esempio

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

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

Passo Modulo 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

È possibile utilizzare il metodo GET, ma si ottengono coppie nome-valore nell'URL, e non sarà raccogliere sul modello. Se si digita "5" in questa forma:

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

su Submit, si otterrà l'URL/ordini id = 5, e non/ordini/5?.

Se siete alla ricerca di/ordini/5, può essere fatto abbastanza facilmente con un po 'di 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> 

Si dovrebbe aggiungere un po' fuga possibilmente, e gestire la condizione in cui l'ingresso del modello era non disponibile, e forse prova per alcuni altri casi limite, ma il codice sopra riportato funziona nel caso base con qualsiasi numero di elementi del modello e ti porterà a/orders/5 in quanto sopra.