如何在load()方法加载的div中提交$_POST类型表单？

我猜你大概率是想实现两个常见需求之一：要么关闭这个搜索对话框，要么提交动态加载的表单并处理返回结果。下面分别给出针对性的解决方案：

1. 实现关闭搜索对话框的search()函数 #

如果你的search()是用来关闭弹窗，直接操作DOM隐藏目标元素即可，因为弹窗是页面初始就存在的结构，直接通过ID选中不会有问题：

function search() {
  // 原生JS方式隐藏弹窗
  document.getElementById('search').style.display = 'none';
  
  // 如果你项目里已经引入jQuery，也可以用更简洁的写法
  // $('#search').hide();
}

2. 提交动态加载的POST表单并处理结果 #

如果search()是用来提交加载过来的表单，需要注意动态元素的操作逻辑，这里分两种场景处理：

方式一：常规表单提交（会跳转页面） #

直接触发表单的原生提交事件即可，注意要判断表单是否已经加载完成：

function search() {
  const targetForm = document.getElementById('second_page_form');
  if (targetForm) {
    // 触发表单提交
    targetForm.submit();
  } else {
    console.error('搜索表单尚未加载完成，请稍后重试');
  }
}

方式二：AJAX无刷新提交（推荐） #

如果不想跳转页面，用jQuery的AJAX来处理POST请求，还能灵活控制返回结果的展示：

function search() {
  const $targetForm = $('#second_page_form');
  if ($targetForm.length === 0) {
    console.error('搜索表单未加载');
    return;
  }

  // 收集表单的POST数据
  const formData = $targetForm.serialize();

  $.ajax({
    url: $targetForm.attr('action'), // 复用表单自身的action地址
    type: 'POST',
    data: formData,
    success: function(response) {
      // 提交成功后的逻辑：比如把搜索结果展示在弹窗里
      $('#search_content').html(response);
      // 或者直接关闭弹窗
      // $('#search').hide();
    },
    error: function(xhr, status, error) {
      console.error('搜索提交失败:', error);
      // 给用户提示错误信息
      $('#search_content').html('<p style="color:red;">搜索失败，请检查后重试</p>');
    }
  });
}

额外注意事项 #

• 确保表单加载完成后再执行相关操作，可以在load()的回调里做初始化：

$('#first_page_div').load('second_page.php #second_page_form', function() {
  console.log('表单加载完成');
  // 这里可以添加表单输入框的实时验证、事件绑定等逻辑
});

• 如果需要表单验证，在提交前先做字段校验：

function search() {
  const $searchInput = $('#second_page_form input[name="search_key"]');
  if (!$searchInput.val().trim()) {
    alert('请输入搜索关键词');
    return;
  }
  // 执行后续提交逻辑
}

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