1

这是我的带有两个文本输入的简单 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>

我试图在提交时获取此表单的结果以查询 MySQL 数据库“/details.php”，然后将 PHP 文件的结果输出到 DIV“结果”中。我正在努力将变量传递给 PHP 文件并将结果输出到 DIV 中。我知道我必须使用一些 JQuery AJAX，但我正在努力让它工作。

这是我当前的 AJAX 脚本：

     <script>
    $('#form1').submit(function(e) {
        e.preventDefault(); // stops form from submitting naturally
        $.ajax({
            data: $(this).serialize(),
            url: '/details.php',
            success: function(response) {
                $('#result').html(response); 
            }
        });
    });
    </script>

在我的 PHP 文件中，我试图通过以下方式获取变量：

     $date=$_GET['date'];
     $size=$_GET['size'];

然后我通过 SQL 查询连接到数据库并回显结果。任何关于我可能出错的地方的建议。谢谢您的帮助！

4

4 回答 4

2

编辑

您必须将 jQuery 代码包装在 domReady 事件处理程序中，如下所示：

$(function() {
    // all your jQuery code goes here!
});

这是一个适用于您现有代码的小提琴：http: //jsfiddle.net/89A2m/

于 2012-05-24T02:23:01.273 回答
0

改变：

<form id="form1">

至

<form id="form1" onsubmit="return false;">

那么你在jquery ajax的“成功”中使用javascript吗

于 2012-05-24T02:27:40.830 回答
0

尝试在完成任何操作之前在 php 文件中添加回显，以确保您正在访问页面并添加

if (window.console != undefined) {
    console.log(response);
}

就在这$('#result').html(response);条线下，看看 php 有什么恶意。您还可以 console.log('whatever')在函数的最后一行添加另一个内容，$('#form1').submit(function(e) {以帮助缩小范围。

于 2012-05-24T02:31:38.837 回答
0

尝试使用回调或更改为 POST。

回调：简单的 jQuery、PHP 和 JSONP 示例？

使用 post... HTML

<form id="form1" method="POST">
          <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>

JS

<script>
$('#form1').submit(function(e) {
    e.preventDefault(); // stops form from submitting naturally
    $.ajax({
        data: $(this).serialize(),
        url: 'details.php',
        method: 'POST',
        success: function(response) {
            $('#result').html(response); 
        }
    });
});
</script>

在你的 PHP 中

$date=$_POST['date'];
$size=$_POST['size'];
于 2012-05-24T02:24:59.230 回答