使用 jQuery serialize() 和 AJAX 发送表单的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16130619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending parts of form using jQuery serialize() and AJAX
提问by jal
I'm trying to send parts of one form by AJAX using jQuery's serialize. The form has 16 textfields. I have 4 buttons. The button0sends the textfields 0,1,2,3, and button1sends the textfields 4,5,6,7, etc etc. How can I do it?
我正在尝试使用 jQuery 的序列化通过 AJAX 发送一个表单的一部分。该表单有 16 个文本字段。我有4个按钮。在button0发送文本框0,1,2,3，和button1发送文本框4,5,6,7，等等等等，我该怎么办呢？
HTML
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Serialize</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'>
</form>
</body>
</html>
jQuery:
jQuery：
$(document).ready(function(){
for(i=0;i<16;i++){
$('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>');
}
for(i=0;i<4;i++){
$('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>');
}
$('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>');
});
回答by Marcel Gwerder
If you really want to stay with only one form try something like I did in this fiddle.
如果您真的只想使用一种形式，请尝试像我在这个小提琴中所做的那样。
Create sub parts for your form.
为您的表单创建子部件。
<form>
<div id="first">
<input name="tbox1" type="text">
<input name="tbox2" type="text">
<input name="tbox3" type="text">
<input id="button1" type="button" value="button1">
</div>
<div id="second">
<input name="tbox4" type="text">
<input name="tbox5" type="text">
<input name="tbox6" type="text">
<input id="button2" type="button" value="button2">
</div>
</form>
And then just select all the elements of the parts:
然后只需选择零件的所有元素：
$(document).ready(function() {
$('#button1').on('click', function() {
alert($('#first input').serialize());
});
$('#button2').on('click', function() {
alert($('#second input').serialize());
});
});
Of course if you also have select boxes you have to add them to the selectors. For example:
当然，如果您还有选择框，则必须将它们添加到选择器中。例如：
$('#second input, #second select').serialize()
回答by Rok Burgar
Try DEMO and CODE
尝试演示和代码
Example, modify to your needs:
例如，根据您的需要修改：
<form name="test">
<input type="textinput" name="first" value="test1" class="form2" /> <br/>
<select name="second" class="form1">
<option value="1">opt 1</option>
<option selected="selected" value="2">opt 2</option>
</select>
<input type="textinput" name="third" value="test1" class="form2" /> <br/>
</form>
<script>
(function() {
// get second form elements
var options = $('form[name=test]').find('input, textarea, select').filter('.form2').serialize();
alert(options);
}())
</script>
This will get all inputs that have form2 class.
这将获得所有具有 form2 类的输入。
回答by OXiGEN
A more semantic and granular approach is to use custom properties to select the different form parts. Makes it easier to reassign form elements to different buttons without messing with containers.
一种更具语义和粒度的方法是使用自定义属性来选择不同的表单部分。可以更轻松地将表单元素重新分配给不同的按钮，而不会弄乱容器。
$('button[name="button1"]').click(function() {
data = $('[scope="part1"]').serialize();
console.log(data);
});
$('button[name="button2"]').click(function() {
data = $('[scope="part2"]').serialize();
console.log(data);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="text1" scope="part1" />
<input type="text" name="text2" scope="part1" />
<input type="text" name="text3" scope="part1" />
<input type="text" name="text4" scope="part1" />
<button type="button" name="button1">Button 1</button>
<input type="text" name="text5" scope="part2" />
<input type="text" name="text6" scope="part2" />
<input type="text" name="text7" scope="part2" />
<input type="text" name="text8" scope="part2" />
<button type="button" name="button2">Button 2</button>
</form>回答by Rakesh Kumar
var formData = $(form).find('#selectedOptions : input') . serialize();
$.post(url, formData) .done(function (data)
{
alert('hi');
});
where #selectedOptions is id of the element.
