FormDataでajax通信すると「&」が「&」になる

Question

フォームに件名や本文を記入して送信すると、メールが送信されるという処理を実装しています。
↓このようなイメージ

フォーム①では、パラメータ付きのURLは正常に記載されるのですが、
フォーム②では「&」が「&」になってしまいます。

例）フォーム②を経由して以下のURLを記載したメールを送信すると、
受け取ったURLは「&」が「&」になってしまう。
https://youtu.be/&KmIkHDcaY5w
↓
https://youtu.be/&KmIkHDcaY5w
のように「＆」が「&」になってしまう。

フォーム①と②は、受け取った側のphpの処理はほぼ一緒ですが、ajaxを投げる時の処理が違っていまして、
フォーム②は画像を添付しているので、FormDataをajax通信しています。

そのあたりが原因かと思っているのですが、どのように対処したらいいか、わからずにいます。。
アドバイスいただけますと幸いです。

###成功しているフォーム①のコード
html側

<form method="post" action="">
   <input type="hidden" name="id" value="<?php h($id); ?>">
   <input type="hidden" name="mail" value="<?php h($mail); ?>">
       <div class="form-group">       
           <div class="form-group row">
               <label class="col-md-3 col-form-label">宛先</label>
               <div class="col-md-6">
                   <span class="form-check"><?php h($order["email"]); ?></span>
               </div>
           </div>
           <div class="form-group row mt-4">
                <label class="col-md-3 col-form-label">件名</label>
                <div class="col-md-8">
                     <input type="text" class="form-control" name="mail_subject" value="<?php h($mail_subject); ?>">
                </div>
           </div>
           <div class="form-group row mt-4">
               <label class="col-md-3 col-form-label">本文</label>
               <div class="col-md-8" id="change_body">
                    <textarea class="form-control" name="mail_body" rows="20">
                    </textarea>
               </div>
           </div>
           ▼クリックで「今すぐ送信」の場合はすぐに領収書が添付されたメールが送信されます
           <div class="form-group row">
                <div class="col-md-2 mt-2">
                     <button type="button" id="send_mail" class="btn btn-block btn-info">確定</button>
                 </div>
           </div>
        </div>
    </form>

<!-- jQuery -->
    <?php print($layout_jquery); ?>
    <script>            
        //確定がクリックされた時の処理 mail=0
        jQuery(function($) {
            $("#send_mail").click(function() {
                var id = $("input[name=id]").val();
                var mail = 1;
                var mail_subject = $("input[name=mail_subject]").val();
                var mail_body = $("textarea[name=mail_body]").val();
                var send_timing = $("input[name=send_timing]:checked").val();
                var send_date = $("input[name=send_date]").val();
                var send_time = $("#send_time").val();
                var send_datetime = send_date + " " + send_time + ":00"
                //今の時間
	            var nowdate = "<?php print($nowtime); ?>";
                
                //バリデーション
                var result = "";
                [省略]
                
                if(result == "") {
                    $.ajax({
                        cache:false,
                        type: "POST",
                        url: "receipt_pdf.php",
                        data:{
                            id:id,
                            mail:mail,
                            mail_subject:mail_subject,
                            mail_body:mail_body,
                            send_timing:send_timing,
                            send_datetime:send_datetime
                            
                        },
                        success:function(data) {
                            //戻ってきた時の処理
                            console.log(data);
                            data_arr = JSON.parse(data); //戻り値をJSONとして解析
                            result = data_arr[0];
                            error = data_arr[1];
                            id = data_arr[2];
                        
                            if(result == 0) {
                                alert("送信に失敗しました。" + error);
                                location.href= `detail.php?id=${id}`;
                            }
                            else {
                                if(send_timing == 1) {
                                    var alert_text = "メールを送信しました";
                                }
                                else {
                                    var alert_text = "メールを予約しました";
                                }
                                alert(alert_text);
                                location.href= `detail.php?id=${id}`;
                            }
                        },
                            error:function(XMLHttpRequest, textStatus, errorThrown) {
                        }
                    });
                }
                else {
                    $("#result").html(result);
                }
            });    
        });             
    </script>

###失敗しているフォーム②のコード
html側

<form method="post" action="" enctype="multipart/form-data" id="form_data">
    <input type="hidden" name="id" value="<?php h($contact_id); ?>">
    <div class="form-group">
        <div class="form-group row">
            <label class="col-md-3 col-form-label">宛先</label>
            <div class="col-md-6">
                 <span class="form-check"><?php h($contact["email"]); ?></span>
            </div>
        </div>
        <div class="form-group row mt-4">
             <label class="col-md-3 col-form-label">件名</label>
             <div class="col-md-8">
                 <input type="text" class="form-control" name="mail_subject" value="<?php h($mail_subject); ?>">
             </div>
         </div>
         <div class="form-group row mt-4">
              <label class="col-md-3 col-form-label">添付ファイル</label>
              <div class="col-md-8">
                   <input type="file" name="temp" id="temp">
              </div>
         </div>
         <div class="form-group row mt-4">
              <label class="col-md-3 col-form-label">本文</label>
              <div class="col-md-8" id="change_body">
                   <textarea class="form-control" name="mail_body" rows="20">
                   </textarea>
              </div>
         </div>
         ▼クリックですぐにメールが送信されます
         <div class="form-group row">
              <div class="col-md-2 mt-2">
                   <button type="button" id="send_mail" class="btn btn-block btn-info">確定</button>
              </div>
         </div>
      </div>
   </form>
<!-- jQuery -->
    <?php print($layout_jquery); ?>
    <script>
        //確定がクリックされた時の処理 mail=0
        jQuery(function($) {
            $("#send_mail").click(function() {
                var send_timing = 1; //デフォルトで今すぐ送信
                var fp = $("#temp");
                var lg = fp[0].files.length;
                var form_data = new FormData($('#form_data').get(0));
                
                //バリデーション
                var result = "";
                [省略]
                if(result == "") {                    
                    $.ajax({
                            type: "POST",
                            url: "reply_done.php",
                            processData: false,
                            contentType: false,
                            //dataType: 'json',
                            data:form_data,
                                
                            success:function(data) {
                                //戻ってきた時の処理
                                console.log(data);
                                var data_arr = JSON.parse(data); //jsonを配列に変換
                                var result = data_arr[0];
                                var error = data_arr[1];
                                var id = data_arr[2];
                                
                                if(result == 0) {
                                    alert("送信に失敗しました。" + error);
                                    location.href= `detail.php?id=${id}`;
                                }
                                else {
                                    if(send_timing == 1) {
                                        var alert_text = "メールを送信しました";
                                    }
                                    else {
                                        var alert_text = "メールを予約しました";
                                    }
                                alert(alert_text);
                                location.href= `detail.php?id=${id}`;
                            }
                                    
                            },
                            error:function(XMLHttpRequest, textStatus, errorThrown) {
                                console.log(XMLHttpRequest);
                                console.log(textStatus);
                                console.log(errorThrown);
                            }
                        });                    
                }
                else {
                    $("#result").html(result);
                }                
            });    
        });        
    </script>

Comments

[mather]

Chromeなどのブラウザの開発者ツールを使ってリクエストデータが実際にどのような形式で送信されているか確認してみましたか？

Answer 1

すみません、、FormData関係ありませんでした。
htmlspecialcharsを通していたからでした。失礼しました。

Answer 2

ソースを全部読んでないですが・・・
「&」が「&」になるのであれば、「&」を「&」にすれば良いとか？

htmlspecialchars_decode