使用$ .post進行簡單的ajax測試，我錯過了什麼？

第一次玩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"; 
    } 
?>

來源

2010-03-15 JoeCortopassi

不是你的函數ajax（str）{'錯過一個閉合的大括號？ – 2010-03-15 21:31:24

嘗試felix的迴應，但它仍然無法正常工作。 Firebug拋出一個「未捕獲的ReferenceError：響應未定義」 – JoeCortopassi 2010-03-15 21:41:46

不知道，如果$.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>

這附加一個onChange處理程序輸入元素的DOM完全加載後。

如果你省略$(document).ready()，你的方法也應該可以工作。但是將JS函數附加到元素更像是使用jQuery完成的。

除此之外，您只需要將代碼包裝到$(document).ready()中，該代碼應在構建完整DOM樹後執行。你的情況，你正在定義一個功能。無需使用文檔，因爲無論如何都不能調用該函數，直到DOM被加載。

閱讀.post()的文檔！

來源

2010-03-15 21:26:44

使你建議進行更改，並且它擺脫了兩個錯誤，但現在firebug告訴我：'未捕獲的ReferenceError：響應未定義' – JoeCortopassi 2010-03-15 21:40:17

@Cortopasta：AI看，你必須做'function（response）{$（「p」）。html（response）}'。更新我的代碼。此外，您必須更改如何將數據發送到服務器，它必須是{'age'：$（this）.val（）}。最好的是，你閱讀文檔：http：//api.jquery.com/jQuery.post/ – 2010-03-16 08:06:11

調試此類問題的最簡單方法是使用允許您查看HTTP請求的工具。嘗試Firebug中的net panel。這可以讓你看到請求的URL是什麼，發送了什麼postdata以及服務器響應是什麼。然後你會知道PHP或JS代碼是否是問題。

來源

2010-03-15 21:32:31 Annie

或者你也可以使用從http://www.fiddler2.com/fiddler2/ – Jayrox 2010-03-15 21:47:26

更改您的這個函數：

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() { ... }

來源

2010-03-15 21:33:14

你ajax()功能附加document#ready事件處理程序。 document#ready會在您的頁面初次加載時觸發，並且不會再次觸發。所以$.post永遠不會執行。只要改變你的功能就可以了。

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

來源

2010-03-15 21:35:17

您發佈的代碼有幾個問題。

它看起來不像你正在關閉「ajax」函數的大括號，所以你應該在加載頁面時得到一個JS錯誤。
您應該寫

function ajax(str){ $.post("ajaxjquerytest.php",str,function(){ $("p").html(response); }); } 或使用$(document).ready飾演Felix建議
看起來像你的PHP代碼需要一個參數命名的年齡，但你，但你沒有明確的名稱給在您的代碼中，您需要創建一個具有相應命名屬性的JS類，例如{ AGE: str }。在jQuery documentation中有一些這樣做的例子。
此外，在JavaScript中使用this關鍵字時要小心，它可以根據context it's used in的含義具有截然不同的含義。（看起來你使用它的方式在頁面最底部描述）。

從Felix的例子開始，從這裏開始工作可能會更容易。

來源

2010-03-15 21:51:26 R0MANARMY

fiddler2費利克斯的答案是不是'因爲回調方法簽名'function（）{...}'沒有定義響應參數，它應該是'function（response）{...}' – R0MANARMY 2010-03-15 22:03:11

如何發送（＃） – JoeCortopassi 2010-03-15 22:05:37

'$ .post（「ajaxjquerytest.php」， {age：str}， function（）{...}）; 另外，如果你按照我提供的jQuery文檔鏈接，他們有幾個如何發送參數到腳本的例子。 – R0MANARMY 2010-03-15 22:14:23

我認爲這裏的問題是沒有定義響應。它應該作爲參數傳遞給函數。試試這個：

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

來源

2010-03-15 21:56:54 jkody21

使用$ .post進行簡單的ajax測試，我錯過了什麼？

回答

相關問題