【问题标题】:Form result queried with a PHP file and then returned into a seperate DIV with Jquery AJAX使用 PHP 文件查询表单结果,然后使用 Jquery AJAX 返回到单独的 DIV
【发布时间】:2025-12-29 11:45:16
【问题描述】:

我一直在尝试让我的表单将其结果提交到 PHP 文件,然后对其进行查询并输出结果。我的 PHP 文件使用通过标准 PHP $_GET 方法传递的变量进行查询,但尝试使用 Jquery AJAX 传递我正在努力的值。任何帮助将不胜感激。以下是我目前所处的位置:

HTML 文件

<div id="content">
  <div id="options">
    <form id="form1">
      <table>
        <tr>
          <td>Date:</td>
          <td><input name="date" type="text" id="datepicker" /></td>
        </tr>
        <tr>
          <td>Size:</td>
          <td><input name="size" type="text" /></td>
        </tr>
        <tr>
          <td colspan="2"><input name="submit" type="submit" value="Submit"/></td>
        </tr>
      </table>
    </form>
  </div>
  <div id="result"> </div>
</div>

我当前尝试在页面顶部插入我的脚本,我的 PHP 文件名为 details.php。

<script>
$('#form1').submit(function() {
  $.ajax({
    data: $(this).serialize(),
    type: $(this).attr('GET'), 
    url: $(this).attr('details.php'),
    success: function(response) {
      $('#result').html(response); 
    }
  });
  return false; // cancel original event to prevent form submitting
});
</script>

谢谢

【问题讨论】:

  • $.attr 用于获取 html 元素的属性。在这种情况下,它正在寻找
    这两个都不存在。这不是你想要做的。

标签: php jquery html ajax dynamic


【解决方案1】:
$('#form1').submit(function(e) {
    e.preventDefault(); // stops form from submitting naturally
    $.ajax({
        data: $(this).serialize(),
        //type: 'GET', //'GET' is default, set to 'POST' if you want.
        url: '/details.php',
        success: function(response) {
            $('#result').html(response); 
        }
    });
});

【讨论】:

  • 一些补充。 1. details.php是一个相对的URL,最好使用/details.php(或者放在服务器上的位置)。 2. GET类型默认设置(见api.jquery.com/jQuery.ajax),所以不需要传递。
  • 努力让它工作。没有创建任何 AJAX 请求说萤火虫。您可以提出任何可能的解决方案吗?
  • 网络 XHR 选项卡上没有任何内容。这是我拉头发的情况之一,因为我完全不知道为什么它不起作用。手头任务的性质!
  • 看起来正确。尝试通过 Firebug 中的网络选项卡检查请求。当然,如果控制台选项卡上没有错误。如果没有结果,尝试通过添加到 $.ajax({.., error: function(jqXHR, textStatus, errorThrown){console.log(errorThrown);} });看看到底出了什么问题。