Jqueryのajaxのデバッグ方法は？

Question

ajaxをJQueryで実装したいと思っているのですが、うまくいきません。

どこで間違っているのかもさっぱり分からないので、
ajaxのコールをデバッグする良い方法があれば教えてもらえないでしょうか。

機能としては、管理画面上でユーザの権限を変更する命令をPOSTするものです。
.clickは動いているため範囲を狭めたのですが、
どこかでajaxのコールがうまくいっていないようなのです。

jsコード:
$('#ChangePermission').click(function(){ $.ajax({ url: 'change_permission.php', type: 'POST', data: { 'user': document.GetElementById("user").value, 'perm': document.GetElementById("perm").value } }) })

phpコード:
`

<?php require_once(functions.php); echo $_POST["user"]; try{ $DBH = mysql_start(); $STH = $DBH->prepare("INSERT INTO people ( username, permissions ) values (?, ?)"); $STH->bindParam(1, $_POST["user"]); $STH->bindParam(2, $_POST["perm"]); $STH->execute(); }catch(PDOException $e){ echo $e->getMessage; } ?>

`
mysql系は、普段は上記でうまくいっているのですが・・。

ずっとチュートリアルを読みあさっていますが、どこが間違っているのかさっぱりです。
どこにエラーがあるのか分かる方法はありませんか？
ものすごい細かい問題ですが、どこからデバッグすればよいか分からずもう大変です。

どうぞ宜しくお願いします！

Answer 1

ブラウザの開発ツールを使ってみるのも便利です。

Google ChromeやInternet Explorerでは、F12キーを押すと開発ツールが開きます。そして、リクエストをキャプチャするように設定した上でAjaxイベントを起こすと、HTTPでのやりとりが記録されます。

これを見れば、
0.そもそもリクエストが飛んでいない
0.リクエストに入る値が全くの予想外
0.PHPがリクエストに対してエラーとなっている

など、問題の切り分けができることがあります。

Comments

[hogehuga]

開発ツールはまったく頭にありませんでした！色々調べて試してみようと思います！丁寧な回答ありがとうございました！

Answer 2

まず、あなたのJQueryに対しサクセスとエラーのコールバックを追加してみましょう

`
$('#ChangePermission').click(function(){
$.ajax({
url: 'change_permission.php',
type: 'POST',
data: {
'user': document.GetElementById("user").value,
'perm': document.GetElementById("perm").value
}
success:function(result)//反応があったら
{
alert('Successfully called');
}
error:function(exception){alert('Exeption:'+exception);}

})

})
`

少しでも和らぐと良いですね。頑張ってください。