Question

这是我的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查询连接到数据库并回显结果。对我可能出错的地方有任何建议。谢谢你的帮助！

Answer 1

修改

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

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

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

Answer 2

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

回调：Simple jQuery, PHP and JSONP example?

使用帖子... 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'];

Answer 3

变化：

<form id="form1">

到

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

然后你在jquery ajax的“成功”中使用javascript

Answer 4

尝试在完成任务之前在php文件中添加一个echo，以确保你到达页面并添加

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

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

表单条目通过PHP文件查询和使用JQuery AJAX输出PHP文件的结果

4 个答案: