最近我一直在研究一个联系人模块。共有3列，即name、email、phone和一个+1按钮，其中包括使用ajax添加一个联系人字段的新行。问题就出现了当我更新我的结构时，旧联系人字段中的数据将消失
例如：
我输入了2行，并将数据填充为名称1、电子邮件1，依此类推。
name1 email1 phone1
name2 email2 phone2
现在，为了添加更多的联系人，我使用+1 botton。我一点击它就得到：
blank_1 blank_1 blank_1
blank_2 blank_2 blank_2
blank_3 blank_3 blank_3 //here blank_1, blank_2, blank_3 are just expressing blank columns
我的jquery代码是：
<script>
$(document).ready(function(e) {
num = 0;
$('#plus_contact').click(function(e) {
num = num +1 ;
$.ajax({
url : 'contact/contact_form.php',
method : 'POST',
data : "number="+num,
success : function(data) {
$('#contact_form_div').html(data);
},
});
});
}); </script>
contact_form.php
<?php
if(isset($_POST['number']) && is_numeric($_POST['number']))
{
echo $list =$_POST['number'];
if($list == 1)
{
for($i=0; $i<$list;$i++)
{
?>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Full Name</label>
<input type="text" name="c_name[]" class="form-control" id="c_full_name" placeholder="Full Name">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" name="c_email[]" class="form-control" id="c_email_id" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Phone</label>
<input type="tel" name="c_phone[]" class="form-control" id="c_phone_number" placeholder="Phone">
</div>
<?php
}
} } ?>
如何在不更改旧行数据的情况下添加行
不用做：
$('#contact_form_div').html(data);
这样做：
$('#contact_form_div').append(data);
然后，您只需要确保在PHP上只返回一个新行。
不要替换当前表单，而是附加PHP脚本生成的新行。因此，您需要使用$('#contact_form_div').append(data);而不是$('#contact_form_div').html(data);。
更改后，可以使用num参数指定要添加的行数。
替换此：
$('#contact_form_div').html(data);
这个：
$('#contact_form_div').append(data);
您只需要附加它而不是替换它。希望它能有所帮助：）
不要在每次请求时都要求完整的表单。保留现在的页面，以便在加载页面时进行表单的第一次加载。
然后，制作一个php页面，输出单行的结果，像您所做的那样通过ajax请求它，然后将结果附加到页面的当前html中。