2

作成しているWebサイトにいくつかの基本的なajax機能を実装しようとしています。これを行うために、FlaskマイクロフレームワークとjQueryを使用しています。私はPython、Flaskが書かれているものについて多くの経験がありますが、javascriptについてはほとんど経験がありません。これが、jQueryを使用することにした理由です。;）Flaskのドキュメントに含まれている素晴らしい例がありますが、問題なく動作しましたが、例のメソッドをコードに適用すると、jQueryでクエリ文字列を正しく入力する際に​​問題が発生し始めました。基本的に、フォーム要素の一部を解析しますが、すべてを解析するわけではありません。

私のHTMLフォームは次のようになります。

<form action method="GET" class="span-11 inline"> 
    <fieldset> 

    <div class='span-5'> 
    <label for="msat_size">Msat Size:</label> 
    </div> 

    <div class='span-5 last'> 
    <select id="msat_size" name="msat_size"><option value="mono">Mono</option><option value="di">Di</option><option value="tri">Tri</option></select> 
    </div> 

    <div class='span-5'> 
    <label for="msat_length">Msat Length:</label> 
    </div> 
    <div class='span-5 last'> 
    <input class="text" id="msat_length" maxlength="3" name="msat_length" size="3" style="width:48px" type="text" value="0" /> 
    </div> 

    <div class='span-5'> 
    <label for="msat_perfect">Perfect Msats:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="msat_perfect" name="msat_perfect" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="combine_loci">Combine Microsatellites:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="combine_loci" name="combine_loci" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="design_primers">Design Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id="design_primers" name="design_primers" type="checkbox" value="y" /> 
    </div> 

    <div class='span-5'> 
    <label for="tag_primers">Tag Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <select id="tag_primers" name="tag_primers"><option selected="selected" value="None">No Tag</option><option value="cag">CAG Tag</option><option value="m13">M13R Tag</option></select> 
    </div> 

    <div class='span-5 prepend-5 last'> 
            <button id="submit_msats" name="submit_msats" type="submit" value="submit_msats" class="button positive"> 
                <img src="/static/css/plugins/buttons/icons/tick.png" alt=""/> Submit
            </button> 
    </div> 
    </fieldset> 
</form>

私のJavaScriptは次のようになります。

<script type=text/javascript>
  $(function() {
    $('.button').bind('click', function() {
      $.getJSON('/query_result', {
        msat_size: $('input[id="msat_size"]').val(),
        msat_length: $('input[name="msat_length"]').val(),
        msat_perfect: $('input[name="msat_perfect"]').val(),
        combine_loci: $('input[name="combine_loci"]').val(),
        design_primers: $('input[name="design_primers"]').val(),
        tag_primers: $('input[name="tag_primers"]').val(),
        }, function(data) {
        $("#stat1").text(data.msat_size),
        $("#stat2").text(data.msat_length);
      });
      return false;
    });
  });
</script>

しかし、クエリ文字列を送信すると、次のようになります。

/query_result?msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

'msat_length'値を適切に変更することができますが、他の値はありません。javascriptの'msat_size'行で.val（）を.text（）に変更すると、名前はクエリ文字列に表示されますが、値は表示されません

/query_result?msat_size=&msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

これを修正する方法についての考えは大歓迎です。ありがとう！

4

3 に答える 3

3

複雑な作業をすべて行う代わりに、jQuery の.serialize()メソッドを利用してみてください。次のようにしてみてください。

$(function() {
    $('.button').bind('click', function() {
        $.getJSON('/query_result?' + $(this).closest('form').serialize(), function(data) {
            $("#stat1").text(data.msat_size), $("#stat2").text(data.msat_length);
        });
        return false;
    });
});

.serialize()メソッドに関するドキュメントは次のとおりです。 http://api.jquery.com/serialize/

そして、実際にそれを示すデモ: http://jsfiddle.net/Ender/q3mdw/

于 2010-10-14T15:23:12.977 に答える
2

シリアル化へのアプローチの問題はさておき、問題の直接の原因は、フォーム要素の一部を誤認していることです。

msat_size: $('select#msat_size').val(), // select, not input
msat_length: $('input#msat_length').val(), // bracket notation unnecessary
msat_perfect: $('input#msat_perfect:checked').val(), // using ID is better
combine_loci: $('input#combine_loci:checked').val(), // use :checked
design_primers: $('input#design_primers:checked').val(),
tag_primers: $('select#tag_primers').val() // select, not input

これは、チェックボックスがオンになっている場合にのみチェックボックスの値が必要であると想定しています。もちろん、条件付きロジックを追加して、チェックボックスがオフの場合はチェックボックスを省略したり、デフォルト値を指定したりできます。

于 2010-10-14T15:30:26.093 に答える
0

これを試して

  $(function() {

    $('#submit_msats').bind('click', function(ev) {

      ev.stopPropagation();

      var context = $('form'),
          sendData =  {
            msat_size: $('#msat_size', context).val(),
            msat_length: $('#msat_length', context).val(),
            msat_perfect: $('#msat_perfect', context).val(),
            combine_loci: $('#combine_loci', context).val(),
            design_primers: $('#design_primers', context).val(),
            tag_primers: $('#tag_primers', context).val()
          };

      alert(sendData.msat_length);

      $.getJSON('/query_result', sendData, function(data) {

        $("#stat1").text(data.msat_size),
        $("#stat2").text(data.msat_length);

      });

      return false;
    });
  });
于 2010-10-14T15:16:08.877 に答える