通过Ajax将动态生成的输入框值传递至PHP

没问题，我来一步步帮你搞定这个需求——从完善动态字段的交互，到Ajax传值，再到PHP接收处理，全流程给你理清楚：

1. 先完善HTML结构 #

你现有的输入字段已经有了，咱们再加个提交按钮，同时把所有输入字段放在一个容器里（方便后续操作）：

<div id="fields-container">
  <div class="entry input-group col-md-12">
    <input class="form-control" name="fields[]" type="url" placeholder="Type URL" />
    <span class="input-group-btn">
      <button class="btn btn-success btn-add" type="button">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </span>
  </div>
</div>
<button id="submit-form" class="btn btn-primary mt-3">提交所有URL</button>

这里给输入框的name设为fields[]是关键——这样PHP能直接把所有输入值接收成一个数组。

2. 编写JavaScript逻辑（动态添加+Ajax提交） #

咱们用jQuery来实现（毕竟你用了Bootstrap，jQuery是标配），主要做两件事：添加新输入框，以及提交数据到PHP：

$(document).ready(function() {
  // 点击"+"按钮添加新的输入字段
  $(document).on('click', '.btn-add', function() {
    // 克隆当前的输入字段容器
    const $newEntry = $(this).closest('.entry').clone();
    // 清空克隆出来的输入框内容，避免带旧值
    $newEntry.find('input').val('');
    // 把"+"按钮改成"-"按钮（可选，提升用户体验）
    $newEntry.find('.btn-success')
      .removeClass('btn-success')
      .addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
    // 把新字段添加到当前字段的后面
    $(this).closest('.entry').after($newEntry);
  });

  // 点击"-"按钮删除对应的输入字段
  $(document).on('click', '.btn-danger', function() {
    $(this).closest('.entry').remove();
  });

  // 点击提交按钮，用Ajax发送数据
  $('#submit-form').click(function(e) {
    e.preventDefault(); // 阻止默认表单提交行为

    // 收集所有输入框的值，serialize()会自动处理`fields[]`的数组格式
    const formData = $('#fields-container input').serialize();

    $.ajax({
      url: 'process-urls.php', // 替换成你的PHP文件路径
      type: 'POST',
      data: formData,
      success: function(response) {
        // 提交成功后的处理，比如提示用户
        alert('提交成功！返回结果：' + response);
        // 可选：清空所有输入框
        $('#fields-container input').val('');
      },
      error: function(xhr, status, error) {
        // 处理提交失败的情况
        alert('提交出错了：' + error);
      }
    });
  });
});

这里用$(document).on()绑定事件，是为了让动态生成的按钮也能触发事件（直接绑定.btn-add只会生效在初始的按钮上）。

3. PHP接收并处理数据 #

创建一个process-urls.php文件，用来接收Ajax传过来的数组，别忘了做数据验证（避免空值或无效URL）：

<?php
// 只处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  http_response_code(405);
  echo '只允许POST请求';
  exit;
}

// 接收所有URL字段，默认是空数组
$urls = isset($_POST['fields']) ? $_POST['fields'] : [];

// 过滤出有效的URL
$validUrls = [];
foreach ($urls as $url) {
  // 去掉首尾空格，检查是否非空且是有效URL
  $trimmedUrl = trim($url);
  if (!empty($trimmedUrl) && filter_var($trimmedUrl, FILTER_VALIDATE_URL)) {
    $validUrls[] = $trimmedUrl;
  }
}

// 这里可以根据需求处理有效URL，比如存入数据库、生成报告等
// 示例：返回处理结果给前端
echo "成功接收 " . count($validUrls) . " 个有效URL：\n" . implode("\n", $validUrls);
?>

几个关键注意点 #

• 确保你已经引入了jQuery和Bootstrap的JS/CSS文件，不然按钮样式和事件绑定会失效；
• fields[]的命名是核心，PHP会自动把同名的数组参数解析成数组；
• 一定要做数据验证，不要直接信任前端传过来的内容，避免无效数据或恶意内容；
• 如果你的前端和PHP不在同一个域名下，需要处理跨域问题（本地开发一般不用管）。

内容的提问来源于stack exchange，提问作者sach jot