AJAX insertは複数のエントリを作成しますが、データは作成しません

Question

私はデータベースをajaxを使用してブロックされたIPアドレスで更新できるスクリプトを作成しようとしています。ブロックボタンを押すとすぐに成功メッセージが表示されますが、データベースを見ると日付が更新されていますので、実際に変数を取得することはありません。しかし、他の2つのフィールドは空ですが、どこに問題があるのか​​分からないようです。私はajaxを初めて使っているので、どんなポインタでも感謝します。

フォーム

<div id="insert_response"></div> 
<!-- Form: the action="javascript:insert()"calls the javascript function "insert" into  ajax_framework.js --> 
<form action="javascript:insert()" method="post" class="block"> 
<div align="center"> 
<input name="id" type="hidden" id="id" value="<?php echo "$id"; ?>"/> 
<input name="ip" type="hidden" id="ip" value="<?php echo "$ip"; ?>"/> 
<input type="submit" name="Submit" class="block" value="Block"/>&nbsp;</div> 
</form> 

アヤックス

$(document).ready(function(){ 
$('form.block').submit(function() { 
var id = $(this).find('.id').attr('value'); 
var ip = $(this).find('.ip').attr('value'); 
// ... 
}); 
    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: "id="+ id +"& ip="+ ip, 
     success: function(){ 
      $('form#block').hide(function() {$('div.success').fadeIn();}); 

     } 
    }); 
return false; 
}); 

のAjaxフレームワーク

function createObject() { 
var request_type; 
var browser = navigator.appName; 
if(browser == "Microsoft Internet Explorer"){ 
request_type = new ActiveXObject("Microsoft.XMLHTTP"); 
}else{ 
request_type = new XMLHttpRequest(); 
} 
return request_type; 
} 

var http = createObject(); 


var nocache = 0; 
function insert() { 
// Optional: Show a waiting message in the layer with ID login_response 
document.getElementById('insert_response').innerHTML = "Just a second..." 
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues  about character encoding. 
var ip = encodeURI(document.getElementById('ip').value); 
var id = encodeURI(document.getElementById('id').value); 
// Set te random number to add to URL request 
nocache = Math.random(); 
// Pass the login variables like URL variable 
http.open('get', 'ajax.php?id='+id+'&ip='+ip+'&nocache = '+nocache); 
http.onreadystatechange = insertReply; 
http.send(null); 
} 
function insertReply() { 
if(http.readyState == 4){ 
var response = http.responseText; 
// else if login is ok show a message: "Site added+ site URL". 
document.getElementById('insert_response').innerHTML = 'Added:'+response; 
} 
} 

そして最後にPHPの

$id = htmlspecialchars(trim($_POST['id'])); 
$ip = htmlspecialchars(trim($_POST['ip'])); 
$addClient = "INSERT INTO ipdata (ip_address, ip_check_id, date_blocked) VALUES ('$ip','$id', NOW())"; 
mysql_query($addClient) or die(mysql_error()); 

Answer 1

idとipの値を使ってJavaScriptで警告を出してみましたか？あなたが言うとき、私はかなり確信している：

$(this).find('.id').attr('value'); 

あなたがidという名前クラスを見つけ、それを言っています。

var id = $('#id').attr('value'); 
var ip = $('#ip').attr('value'); 

Answer 2

あなたが戻ってきている成功メッセージは、単にAJAX呼び出しことを語っている：あなたの実際の要素は、それが代わりに.

の#を使用してアクセスされるid="id"が代わりにこれを試してみてくださいと言い、むしろclass="id"を言っていません。成功しました。サーバーに接続して応答を返すことを意味します。それは、サーバー側のPHPスクリプトとは関係ありません。サーバーから返ってくる応答を確認し、その内容を確認する必要があります。あなたは火かき棒でこれを見ることができ、単にalert（）またはconsole.log（）で応答を見ることができます。

また、サーバーに送信されるデータもチェックする必要があります。空のIDまたはIPアドレスを送信している可能性があります。この情報はFirebugでも見ることができます。

Answer 3

今後の参考として、$（ 'form'）。serialize（）を使用してデータを取得することをお勧めします。

$.ajax({ 
    type: "POST", 
    url: "ajax.php", 
    data: $('form').serialize(), 
    success: function(){ 
     $('form#block').hide(function() { $('div.success').fadeIn();}); 

    } 
}); 

これにより、フォームデータを処理スクリプトにプルするときの間違いを回避できます。