gpt4 book ai didi

jquery - 无法使用 jQuery 从选择字段中获取值

转载 作者:行者123 更新时间:2023-12-01 03:04:28 24 4
gpt4 key购买 nike

我正在尝试在我正在创建的网站中实现一些基本的ajax 功能。我使用 Flask 微框架和 jQuery 来做到这一点。我对 python、Flask 的编写有很多经验,但对 javascript 的经验很少。这就是我决定使用 jQuery 的原因。 ;) 有一个不错的example包含在 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

任何有关如何解决此问题的想法将不胜感激。谢谢!

最佳答案

您应该尝试利用 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/

关于jquery - 无法使用 jQuery 从选择字段中获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3934469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com