3

我已经针对这个问题提出了一个问题，但它的表述非常糟糕，因此我没有得到很好的回应......所以再试一次......希望没关系

我有一个带有选定标签的表单和里面的一些选项

<form>
  <select>
     <option selected="selected"></option>
     <option value="1" data-seourl="food-intake">Food intake</option>
     <option value="2" data-seourl="homemade-cake">Homemade cake</option>
     <option value="3" data-seourl="good-fruits">Good fruits</option>
     <option value="4" data-seourl="apple-type">Apple type</option>
  </select>
</form>

当我选择一个选项（onchange）时，我想向与此类似的服务器提交一个友好的 url：

http://www.mywebsite/kitchen/food-intake.1
http://www.mywebsite/kitchen/homenade-cake.2
...

而不是发送默认值：

http://mywebsite/kitchen/?category=1
http://mywebsite/kitchen/?category=2

我知道如何使用 mod_rewrite，所以这不是问题。我需要了解如何提交友好的网址而不是默认网址？

javascript（在这种情况下为 jQuery）是唯一的解决方案还是有本机解决方案？

谢谢

4

2 回答 2

3

试试这个：

$('select').change(function()
{
    var $option = $(this).find('option:selected');
    if ($option.length)
    {
        window.location.href = 'http://www.mywebsite/kitchen/'+
                               $option.attr('data-seourl')+'.'+
                               $option.attr('value');
    }
});

注意：从技术上讲，这不是<form>提交，但实际上您可以合理地做所有事情，因为表单会尝试附加您不想要的查询字符串。不过，这两种方法都会产生 HTTP GET 请求。

于 2012-09-18T21:49:22.807 回答
1

与 jimp 的回答类似，您可以使用 jQuery 的 AJAX 函数：

$('select').change(function() {
    var $option = $(this).find('option:selected');
    var url = 'http://www.mywebsite/kitchen/'
        + $option.attr('data-seourl') 
        + '.' 
        + $option.attr('value');
    if ($option.length) {
        console.log("Sending this data via POST request: ", $("form").serialize());
        $.post(url, $("form").serialize(), function(data) {
            console.log("POST request got this response back:", data);
        });
    }
});

也可以看看：

于 2012-09-18T21:55:08.237 回答