Question

第一次玩jquery，我正在努力让一个简单的AJAX设置工作，这样我就能更好地理解它是如何工作的。不幸的是，我不知道很多。这是带脚本的HTML：

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   function ajax(str){
   $("document").ready(function(){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
       });
     });
 </script> 
</head>  
<body>
 <input type="text" onchange="ajax(this.value)"></input> 
 <p>Age?</p>
</body>
</html>

以下是与之交谈的PHP：

<?php
$age = $_POST['age'];

if ($age < 30)
  {
  echo "Young";
  }
else if ($age > 30)
  {
  echo "Old";
  }
else
  {
  echo "you're 30";
  }
?>

Answer 1

不确定$.post()函数是否可以访问str参数。试试这个：

<html>
<head>
 <title>AJAX attempt with jQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
    $("document").ready(function(){
        $('input').change(function() {
             $.post("ajaxjquerytest.php",{'age': $(this).val()},function(response){
                 $("p").html(response);
             });
        });
    });
 </script> 
</head>  
<body>
 <input type="text" />
 <p>Age?</p>
</body>
</html>

在DOM完全加载后，这会将onChange处理程序附加到input元素。

如果省略$(document).ready()，您的方法也应该有用。但是将JS函数附加到元素更像是使用jQuery。

除此之外，您只需要将代码包装到$(document).ready()中，该代码应该在构建整个DOM树之后执行。你的情况，你只是定义一个功能。没有必要使用文档就绪，因为无论如何都无法调用该函数。

阅读.post()的文档！

Answer 2

我认为这里的问题是没有定义响应。它应该作为参数传递给函数。试试这个：

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(response) {
        $("p").html(response);
    });
}

Answer 3

您发布的代码中存在一些问题。

看起来你没有关闭“ajax”函数的大括号，因此在加载页面时应该会出现JS错误。
你应该写

function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } 或使用$(document).ready作为Felix建议
看起来你的PHP代码需要一个名为AGE的参数但是你没有在代码中明确地给出一个名字，你需要创建一个带有适当命名属性的JS类，如{{ 1}}。在jQuery documentation。
另外，在JavaScript中使用{ AGE: str }关键字时要小心，它可能会基于context it's used in具有截然不同的含义。（看起来你正在使用它的方式在页面的最底部描述）。

从费利克斯的例子开始可能更容易，但从那里开始工作。

Answer 4

调试此类问题的最简单方法是使用允许您查看HTTP请求的工具。试试net panel中的Firebug。这将让您看到请求的URL是什么，发送了什么postdata，以及服务器响应是什么。然后你会知道PHP或JS代码是否是问题。

Answer 5

从此更改您的功能：

function ajax(str){
    $("document").ready(function(){
        $.post("ajaxjquerytest.php",str,function(){
            $("p").html(response);
        });
    });
}

为：

function ajax(str){
    $.post("ajaxjquerytest.php",str,function(){
        $("p").html(response);
    });
}

首先，$(document).ready()构造在首次加载页面时执行。其次，“文件”不应该用引号括起来。最后，您可能会获得更好的成功：

<form>
    <input type="text" />
    <p>Age?</p>
    <input type="submit" />
</form>

并改变：

$('input').change(function() { ... }

为：

$('form').submit(function() { ... }

Answer 6

您的ajax()函数附加了document#ready事件处理程序。当您的页面最初加载时，document#ready会被触发，并且它永远不会再次触发。所以$.post永远不会执行。只需将您的功能更改为此。

function ajax(str){
     $.post("ajaxjquerytest.php",str,function(){
       $("p").html(response);
     });
}

使用$ .post进行简单的ajax测试，我错过了什么？

6 个答案: