我試圖在我創建的網站中實現一些基本的ajax功能。我使用Flask微框架和jQuery來做到這一點。我有很多python的經驗,Flask寫的是什麼,但很少用javascript。這就是爲什麼我決定使用jQuery。 ;)Flask文檔中包含了一個很好的example,我沒有任何麻煩,但是當我將示例中的方法應用於我的代碼時,我開始遇到了讓jQuery正確填充查詢字符串的問題。本質上,它解析了我的一些表單元素,但不是全部。從選擇字段與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'的值正確更改,其他都不會。如果我改變.VAL()與.text區段()在JavaScript的「msat_size」行,該名稱將出現在查詢字符串,但沒有一個值
/query_result?msat_size=&msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y
關於如何解決此問題的任何想法會不勝感激。謝謝!
謝謝大家的所有幫助。我想我會用恩德的序列化建議。 – 2010-10-14 16:21:15