ajaxお気に入りボタン

Question

AJAXでお気に入りのボタンを作りたいです。私は既にPHPクエリを書いていますが、AJAXを作成してボタンに接続する方法はわかりません。

私はあなたが

Answer 1

に私が見ることができるいくつかの明白な問題は私を助けることができる場合、私はそれを感謝のお気に入り/お気に入りから削除

$test = $_SESSION['ww']; 
if (isset($_POST['submit']))  
{ 
    $x = $_SESSION['x']; 
    $SelectQry2 = "select * from favorites where User_Id = ".$test." and User_Post = ".$x.""; 
    $slc = mysqli_query($link , $SelectQry2); 

    if (mysqli_num_rows($slc)> 0) 
    { 
    $DeleteQry = "DELETE from favorites where User_Post = ".$x.""; 
    $del = mysqli_query($link , $DeleteQry); 
    } 
    else 
    { 
    $url = $_SERVER['REQUEST_URI']; 
    $InsertQry = "insert into favorites"; 
    $InsertQry .="(`User_Id` ,`User_post`, `url`) VALUES"; 
    $InsertQry .=" ('$test' ,'$x', '$url')"; 
    $fav = mysqli_query($link, $InsertQry); 
    } 
} 

if(isset($_GET['id'])) 
{ 
    $id = intval($_GET['id']); 
    $SelectSql = " SELECT * , `upload_diy_ordinary`.`date` as datep FROM `users_final` LEFT OUTER JOIN `upload_diy_ordinary` ON `upload_diy_ordinary`.`User_ID`=`users_final`.`id` "; 
    $SelectSql .= " where `upload_diy_ordinary`.`ID` = $id"; 
    $result = mysqli_query($link, $SelectSql); 

    while($row = mysqli_fetch_assoc($result)) 
    { 
    $_SESSION['x'] = $row['id']; 
    <form method="post"> 
     <input type="submit" name="submit" id="favorite" value="favorite" /> 
    </form> 
    <?php } 
} ?> 

$(document).on('click', '#favorit', function(e) { 
    var data = $("#form").serialize(); 
    $.ajax({ 
    data: data, 
    type: "post", 
    url: "details.php", 
    success: function(data) { 
     alert("Data Save: " + data); 
    } 
    }); 
}); 

ような何かをしたい：

1）'#favorit'を文字列の末尾にeが見つからないため、どのボタンとも一致しません。

2）これが有効になると、自動的に「送信」ボタンが表示されるため、フォームがポストバックされます。したがって、ポストバックを取得し、競合するAjaxリクエストも受け取ることになります。 e.preventDefault();をクリック機能の最初の行に書き込んで、定期的なポストバックをやめ、あなたのajaxを動作させてください。

3） "お気に入り"というIDを持つ複数のボタンを書き出しています。複数のIDはHTMLでは使用できません。あなたの「クリック」機能は最初のボタンと一致します。他のボタンはすべて無効と見なされるからです。

4）$("#form").serialize();は、idが "form"の要素がないため動作しません。

私は次の操作を実行することをお勧め：

1）あなたは、フォームの複数のインスタンスを識別し、それらすべてにイベントハンドラをバインドすることができますので（IDSとは異なり、あなたは繰り返すことができ、クラス属性で、このようなフォームのコードを書きますあなたが好きなように多くの要素で同じクラス名）：

<form class="favourite-form" method="post"> 
    <input type="submit" name="submit" value="favorite" /> 
</form> 

2）の代わりに送信ボタンのクリックイベントの者がイベントを提出するフォームにイベントハンドラをバインドします。その後、簡単にフォームをシリアライズすることができます。

$(document).on('submit', '.favourite-form', function(e) { 
    e.preventDefault(); //prevent a normal postback and allow ajax to run instead 
    var data = $(this).serialize(); //"this" represents the form element in this context 
    $.ajax({ 
    data: data, 
    type: "post", 
    url: "details.php", 
    success: function(data) { 
     alert("Data Save: " + data); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) //gracefully handle any errors in the UI 
    { 
     alert("An ajax error occurred: " + textStatus + " : " + errorThrown); 
    } 
    }); 
}); 

また、あなたが緊急に固定検討すべき別の問題であるSQLインジェクション攻撃へのあなたの深刻な脆弱性を、再度上記の私のコメントを注意してください。