Question

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

所以无论如何都要提交这样的表格？

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

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

Answer 1

您可以使用GET方法，但是您将在URL中获得名称 - 值对，并且它不会获取模板。如果您在此表单中键入“5”：

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

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

如果您正在寻找/ orders / 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。

Answer 2

您忘了关闭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(); });

如何使用GET方法提交表单并使用URI模板？

2 个答案: