Ajaxを使うときに$_POSTの値をどうやって送ればいいか

Question

前提・実現したいこと

いいね機能を実装したい。
いいねボタンを押したら画面遷移することなく、いいねの数値を変更したい。

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

$_POSTの値をAjaxで実行するPHPで使いたいのですが、下のようにiframeを使って画面が遷移しないようにすると$_POSTの値が送れません。

またiframeを使わないと開いているPHPが再度読み込まれてしまうので、目的の動きにはなりません。

どうすれば画面遷移をさせずに$_POSTの値が送れるでしょうか？

該当のソースコード

・・・
<form method="POST" target='fuga'>
　<button id='likes<?php echo $row['id'] ?>'>いいねテスト</button>
　<input type='hidden' name='post_id' value='<?php echo $row['id'] ?>'>
　<input type='hidden' name='user_id' value='<?php echo $user_id ?>'>
　<input type='hidden' name='switch' value='insert'>
</form>
<iframe name='fuga' src='' style='display:none;'></iframe>
・・・

$(function () {
    $("[id^=likes]").click(
        function(){
            var id = this.id;
            $.ajax({
                url: 'likes_count.php',
                data:{"id": id},
                type: 'POST',
                cache: false,
                dataType: 'json',
                success: function(data){
                    alert('成功');
                },
                error: function(){
                    alert('error');
                }
            });
        }
    );
});

//修正
$(function () {
    $("[id^=likes]").on('click', function(e){
        e.preventDefault();
        var formData = new FormData($('#example_form').get(0));
        var id = this.id;
        id = id.replace("likes","");
        $.ajax({
            url: 'likes_count.php',
            data:{
                "id": id,
                formData
            },
            type: 'POST',
            cache: false,
            dataType: 'json', 
            contentType: false,
            processData: false,
            success: function(data){
                alert('成功');
            },
            error: function(){
                alert('error');
            }
        });
    })
});

Comments

[m.ts10806]

JavaScriptのコードどうなってるのでしょう。

Answer 1

見切り発車的な回答になりますが、
buttonタグのtype属性は初期値submitなので、送信されてるだけでは。
type=buttonにするか、Event.preventDefault()するかでsubmitしないようにできますし、これだけのために設置するiframeも不要です。
AjaxならJavaScriptでリクエストを構成するので、個々にformData詰め込めばformタグは必要ないと思います。
（処理が複数行あるとかなら列番号を振るなど工夫は必要ですが。）

Comments

[退会済みユーザー]

何々を使えばできるだのお前のアドバイスは毎回質問者のやり方に沿ってねえんだよ
いい加減teratailやめろや

[kazu235]

ありがとうございます。
送信しないようにするのはできました。
FormDataを記述するのはPHPの中で大丈夫でしょうか？

[m.ts10806]

FormDataはJavaScriptのオブジェクトです。
https://developer.mozilla.org/ja/docs/Web/API/FormData
いずれにしてもsubmit止める（しない）だけで何とかなると思います。

Answer 2

これでiframe使わずに画面移行せずに通信できるかと…
ミスってたらごめんなさい。

<form method="POST" name="example_form">
　<button type="submit" id='likes<?php echo $row['id'] ?>'>いいねテスト</button>
　<input type='hidden' name='post_id' value='<?php echo $row['id'] ?>'>
　<input type='hidden' name='user_id' value='<?php echo $user_id ?>'>
　<input type='hidden' name='switch' value='insert'>
</form>

$("[id^=likes]").on('click', function(e) {
   e.preventDefault();
   var formData = new FormData($('#example_form').get(0));
   $.ajax({
     url: "likes_count.php",
     type: "POST",
     data: formData,
     contentType: false,
     processData: false,
    }).done(function(data) {
      console.log("テスト成功"));
   
    }).fail(function(data) {
      console.log("テスト失敗");
    });
  });
});

Comments

[kazu235]

ご回答ありがとうございます。
FormDataの作成までいけました。
送ったFormDataの値はPHP側ではどうやって受け取ればいいでしょうか？
$user_id = filter_input(INPUT_POST, "user_id");
このように書くとエラーになってしまいます。

[RYO_U]

form 部分のname="example_form"
をname ではなく、id　の間違いでした
id = "example_form"
これで行けると思います。

[kazu235]

ありがとうございます。ですがまだ
Uncaught TypeError: Illegal invocation
というエラーが出てしまいます。ソースコードを追記しましたので、お助けください。

[RYO_U]

data: formData だけで <input> の値を取得できませんでしたか？

[kazu235]

エラーなくなりました。
取得はできるのですが、likes_count.phpに値を送ろうとしてもできません。
長くなったので質問を別でたてます。

Answer 3

受け取ったデータをどうしたいかも記載したほうがよいですね

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('[id^=likes]').forEach(x=>{
    x.addEventListener('click',e=>{
      e.preventDefault();
      fetch('sample.php',{body:new FormData(x.form),method:'post'}).then(res=>res.text()).then(console.log);
    });
  });
});
</script>
<form method="POST">
<button id="likes1">いいねテスト</button>
<input type='hidden' name='post_id' value='1'>
<input type='hidden' name='user_id' value='2'>
<input type='hidden' name='switch' value='insert'>
</form>