عدم الحصول على قيم من حقول محددة مع jQuery
سؤال
أحاول تنفيذ بعض وظائف Ajax الأساسية في موقع الويب الذي أقوم بإنشائه. أنا أستخدم Flask microframework و 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" للتغيير بشكل صحيح ، لا شيء من الآخرين. إذا قمت بتغيير .val () إلى .Text () في خط "msat_size" في JavaScript ، سيظهر الاسم في سلسلة الاستعلام ، ولكن بدون قيمة
/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/
نصائح أخرى
إذا وضعنا جانباً قضايا نهجك في التسلسل ، فإن السبب الفوري للمشكلة هو أنك تخطئ في تحديد بعض عناصر النماذج الخاصة بك:
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
هذا يفترض أنك تريد فقط قيم مربع الاختيار إذا تم فحصها. يمكنك بالطبع إضافة منطق مشروط لحذف مربعات الاختيار إذا لم يتم فحصها ، أو توفير قيمة افتراضية.
جرب هذا
$(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;
});
});