如何使用GET方法提交表单并使用URI模板？ [英] How to submit form with GET method and using URI template?

问题描述

我读过这篇文章 http：/ /blog.welldesignedurls.org/2007/01/11/proposing-uri-templates-for-webforms-2/ 关于URI模板，但它似乎是一个死的项目。

$ b $因此，无论如何要提交这样的表单？

 < form action =/ orders / {id} method =get> 
< input type =textname =id/> 
< input type =submitvalue =Submit/> 
< / form> 
  

提交到奇数网址后的表单： / orders /％7Bid ％7D？id = 1

解决方案

您可以使用GET方法，名称 - 值对，并且它不会选择该模板。如果您在此表单中输入5：

 < form action =/ ordersmethod =get> 
< input type =textname =id/> 
< input type =submitvalue =Submit/> 
< / form> 
  

提交后，您将获得URL / orders？id = 5，而不是/ orders / 5 。

如果您正在寻找/ orders / 5，可以使用jquery轻松完成：

 < script type =text / javascriptlanguage =javascript> 
 $（form）。submit（function（）{
 //防止默认的GET表单行为（名称 - 值对）
 event.preventDefault（）; 
 
 //获取action属性
 var action = $（form）。attr（action）。toLowerCase（）; 
 
 //对于找到的每个表单元素，替换action属性中的{elementName}以从模板
 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]）; 
} 
 
 //将用户切换到URL w / template元素替换
 window.location.href =行动; 
}）; 
< / script> 
  

您可能需要添加一些转义项，并在模板输入不可用时处理该情况，也可以测试一些其他边缘情况，但上面的代码在基本情况下可以使用任意数量的模板元素，并且可以在上面找到/ order / 5。

I read this article http://blog.welldesignedurls.org/2007/01/11/proposing-uri-templates-for-webforms-2/ about URI Templates but it seems a dead project.

So there are anyway to submit form like this ?

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

The form after submiting forwards to an odd url: /orders/%7Bid%7D?id=1

解决方案

You can use the GET method, but you will get name-value pairs in the URL, and it will not pick up the template. If you type "5" into this form:

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

On submit, you will get the URL /orders?id=5, and not /orders/5.

If you're looking for /orders/5, it can be done easily enough with some 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>

You would have to add some escaping possibly, and handle the condition when the template input was not available, and maybe test for some other edge cases, but the above code works in the base case with any number of template elements, and would get you to /orders/5 in the above.

这篇关于如何使用GET方法提交表单并使用URI模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！