Ajax jQuery PHPでいいねボタンを作っています

今現在、同じページに複数の商品が一覧として表示されているのですが、その商品それぞれに「お気に入り」ボタンを設置しています。「お気に入り」ボタンを押すと別ページに遷移することなくMySQLにお気に入りの商品コードナンバーが保存されるように設定をしたいです。

formを作成し、POSTでの受け渡しでは成功したのですが、できればformを使ったPOSTではなくurlでのGETで対応できればと思っています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード


【index.html】
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script>
    $(document).ready(function() {
       $('#send').click(function() {
         var data = {'request' : $('#request').val()};
         $.ajax({
           type: "GET",
           url: "hoge.php",
           data: data
         }).success(function(data, dataType) {
           // PHPから返ってきたデータの表示
           alert(data);
         }).error(function(XMLHttpRequest, textStatus, errorThrown) {
           alert('Error : ' + errorThrown);
         });
         return false;
       });
     });
  </script>
  </head>
  <body>
    <a href="?request=3124" id="send">お気に入り</a>
  </body>
</html>


【hoge.php】
<?php

header('Content-type: text/plain; charset=UTF-8');

if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])  && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    // Ajaxリクエストの場合のみ処理する

if (isset($_GET['request'])) {
    //ここに何かしらの処理を書く（DB登録やファイルへの書き込みなど）
    echo '成功';
} else {
    echo '失敗';
}
}
?>

試したこと

$.ajax({
type: "POST",
url: "hoge.php",
data: data
})

上記の個所を単純にPOSTをGETに変えるだけではダメで、色々試行錯誤したのですが、最近web関連のコードを勉強し始めた初心者にはなかなか状況を打破できず、皆さんのお力添えを頂ければと思います。ご指導お願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/07/27 11:15

インデントがおかしいので整形サービスなど利用して調整してください。

sonohe

2018/07/27 11:41

インデントの整形をしました。それ以外は何かございますか？

m.ts10806

2018/07/27 11:50

htmlとPHPはコードブロックをわけてください。ブロックの冒頭を```html ```phpのようにすると指定した言語に則したコードハイライトになります。

m.ts10806

2018/07/27 11:51

あと、PHPのインデントそろってないままですよ。

m.ts10806

2018/07/27 11:53

1点気になったのですが、ajaxは画面遷移を伴わないので、あえてGETで・・というのはどういうことなのでしょうか。DBへの保存処理自体はできていますか？

sonohe

2018/07/27 12:11

最初にPOSTで対応をして、成功はしています。DBにも保存は問題なくできています。ただPOSTでできるならGETでもできるのではないと思って試行錯誤しています。

sonohe

2018/07/27 12:13

すいません、PHPも上書きました。質問が増えてしまって申し訳ないのですがコードブロックやコードハイライトと新しい疑問が生まれてしまいました..

m.ts10806

2018/07/27 12:14

typeをGETに変えて$_POSTを$_GETに変えるだけのはずですが。探せばいくらでもサンプルコード出てきますので、そちらで試してみてもう少しやってみてください。

m.ts10806

2018/07/27 12:16

質問内容や回答で使えるマークダウンの<code>機能によって生成される```＜コード＞``` がコードブロック。コードハイライトは変数や関数などが色がついたりするものです。右記参考にしてください。https://teratail.com/questions/7119

sonohe

2018/07/27 12:20

<a href="?request=3124" id="send">お気に入り</a>のhrefをブランクにしてtype: "GET",の次のurlに ?request=3124 を入れたら成功しました。お付き合いありがとうございます！

sonohe

2018/07/27 12:22

何分勉強し始めて1ヶ月満たないので、用語に付いていきだけでもいっぱいいっぱいです。。コードブロック、コードハイライトも頑張って理解します！

m.ts10806

2018/07/27 12:22

そもそもですけど、$('#request').val()　としている割に id="request" の要素がどこにもないですね。

m.ts10806

2018/07/27 12:23

コードブロック、コードハイライトはあくまでteratailの文章の書き方です。ヘルプ・質問するときのヒント　熟読してください。

sonohe

2018/07/27 12:34

最初に<form method="post"><input type="hidden" id="request" value="3124"><input id="send" value="お気に入り追加" type="submit" /></form>とPOSTでやってみたので、その時の消し忘れです。。var dataの一文とdata:dataも消して確認したら何とか成功しました！

sonohe

2018/07/27 12:34

なるほど、質問の仕方も大事ですからね。確認いたします！

行動規範の内容に同意します

回答1件

自己解決

<a href="?request=3124" id="send">お気に入り</a>のhrefをブランクにして

$.ajax({
type: "GET",
url: "hoge.php",
data: data
}

上記のurlのhoge.phpをhoge.php?request=3124にしたところ成功しました。

[index.php]

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { $('#send').click(function() { $.ajax({ type: "GET", url: "hoge.php?request=3124", }).success(function(data, dataType) { // PHPから返ってきたデータの表示 alert(data); }).error(function(XMLHttpRequest, textStatus, errorThrown) { alert('Error : ' + errorThrown); }); return false; }); }); </script> </head> <body> <a href="" id="send">お気に入り</a> </body> </html>

[hoge.php]

<?php header('Content-type: text/plain; charset=UTF-8'); if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Ajaxリクエストの場合のみ処理する if (isset($_GET['request'])) { //ここに何かしらの処理を書く（DB登録やファイルへの書き込みなど） echo '成功'; } else { echo '失敗'; } } ?>

投稿2018/07/27 12:24

編集2018/07/27 12:41

sonohe

総合スコア6