我需要提交通过使用ajax附加功能添加额外的字段
我需要提交通过使用ajax附加功能添加额外的字段
提问于 2019-01-30 15:41:04
我遇到了一个关于使用ajax提交附加字段的障碍。
这是对我的问题的描述。
我的HTML表单是
<div id="append-fields">
<input name="firstName[]" id="firstName" value="john"></input>
<input name="lastName[]" id="lastName" value="Doe"></input>
</div>
<button onclick="appendFunction()" type="button">Add a new row</button>单击按钮add a new row后，我会看到两个类似下面这样的字段
<div id="append-fields">
<input name="firstName[]" id="firstName" value="anna"></input>
<input name="lastName[]" id="lastName" value="Kondo"></input>
</div>现在，我需要使用ajax提交以下数据
firstName = 'john',lastName = 'Doe'
firstName = 'anna',lastName = 'kondo'但我只得到了一组这样的数据
firstName = 'john',lastName = 'Doe'下面是myscript
<script>
insert = [];
insert[0] = $("#firstName").val();
insert[1] = $("#lastName").val();
$.ajax({
url: 'myUrl',
method: 'POST',
data: {take:insert},
error: function () {
},
success: function (response) {
$('#overlay').addClass("hidden");
jQuery('#body').html(response);
}
});
</script>这是我的PHP
function myUrl(){
$data = $_POST["take"];
}错误在哪里？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-30 16:18:33
您可以使用formdata
var data = new FormData($('form')[0]);
data .append('extra', add_data);或者按类序列化或seriallizeArray，我会断定
var form_data = $('.post_these').serialize();PS: post_these是输入字段类
在PHP中按名称访问
$firstName = $_POST['firstName'];或者当数据是数组时，创建一个对象
$data= (object) $_POST['data'];
$data-YfirstName; // use this way PS使用这个来调试，在你的控制器中检查你收到的东西
echo '<pre>';
print_r($_POST);
echo '</pre>';
exit();Stack Overflow用户
发布于 2019-01-30 15:45:50
您不应该通过ID获取数据值，因为不可能有多个相同的ID元素。
由于您使用的是jquery，因此使用$('form').serialize()或$('form').serializeArray()作为数组输出，以获取所有表单输入及其值。但是，在执行此操作之前，您必须将这些输入包装在一个表单元素中。
或者像上面建议的那样，手动遍历元素并获得类似这样的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54444282
复制相关文章
![为wordpress文章添加额外功能[移植自DUX主题]](https://ask.qcloudimg.com/http-save/yehe-2624059/wh6bdta1i9.png?)
点击加载更多
相似问题
如何使用ajax和附加字段提交申请
jquery - colorbox插件，我需要通过ajax提交表单
我试图通过ajax将我自己的数据附加到提交的表单中，但是提交没有通过
如何通过JavaScript添加额外的字段
Symfony通过CreateAction添加额外的字段
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
