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>

オプション（変更時）を選択すると、次のようなわかりやすい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の使い方を知っているので、それは問題ではありません。デフォルトの代わりにわかりやすいURLを送信する方法を理解する必要がありますか？

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 に答える