jqueryのajaxを使用しているが処理がphp側へいかない

Question

#実現したいこと
送信ボタンを押した際にテキストエリアに入力されたデータをajaxでphp側へ送りたいが送ることができないので送れるようにしたいです。

#現状
エラーなどは、出ないのですが、php側に埋め込んだログメッセージなどがログに書き込まれていないので、処理がphp側に来ていない状態です。

#実際のソースコード

●html・js側

                <div class="chatRoomFooter">
                    <form method="post" name="chat_direct" enctype="multipart/form-data">
                        <div class="input textareaParts expand">
                                <div class="minTextareaParts selfclear">
                                    <div class="textareaWrapper">
                                     <textarea class="commonContent" name="GROUP_CHAT_EXCHANGE_COMMENT_TEXT" id="GROUP_CHAT_EXCHANGE_COMMENT_TEXT" placeholder="コメントを入力"></textarea>
                                    </div>
                                    <div class="functionButton">
                                        <button id="direct_chat_create"  name="direct_chat_create" class="submit direct_chat_create">送信</button>
                                    </div>
                                </div>
                        </div>
                    </form>
                </div>

// ##################################################
// ダイレクトチャット部分やり取り関係機能
// ##################################################

$(function() {
  //登録した際の投稿部分のカウント数
  var registerNum = 0;

  //登録処理をする際のajaxの記載
  $(document).on('click','button[name="direct_chat_create"]',function(){

    //送信する時の登録用のオブジェクトを作成する
    var senddata = new Object();

    //登録するコメント本文を作成
    $('textarea.commonContent').each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    })
    //登録するボタンの情報を作成
    $('button[name="direct_chat_create"]'.each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    }))

    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      //IEで使用する時などに使用する
        ajax = new ActiveXObject("MSXML2.XMLHTTP.3.0");
    }
    // Ajaxでのカテゴリの登録・削除

    $.ajax({
        type: "POST",
        url: "library/Api/chatDirect.php",
        data: senddata,


        done: function (senddata) {
            $('.chatRoomCommentBlock').after("<div id=\"new_direct_chat_comment_"+registerNum+"\"></div>");
            $('#new_direct_chat_comment_'+registerNum).html(senddata);
            registerNum++;
        },
        fail: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    })
  });

  //登録した投稿に関して返信をする際に必要
  $(document).on('click','a[id="reply_comment"]',function(){
    //返信した際のhtml要素を取得する
    var className = $(this).attr('class');
    var directExchangeList = className.split('_');

    //ダイレクトチャットの時の返信コメント番号
    var direct_chat_exchange_reply_comment_no = directExchangeList[2];
    //ダイレクトチャット時の表示番号
    var direct_chat_exchange_display_no = directExchangeList[3];

    //作成するhtmlタグを作成(返信したコメントとお気にいりやいいねや返信ボタンを表示させる)
    $('#reply_to').html(
        direct_chat_exchange_display_no+'へ返信する'
        +'<a href="javascript:void(0);" id="reply_cancel">×</a>'
        +'<input type="hidden" class="direct_chat_create" id="direct_chat_exchange_reply_comment_no" value="'+direct_chat_exchange_reply_comment_no+'">'
    );

  });
})

●php側

<?php
// library直下のlibrary.phpを読み込むように設定する
require_once(preg_replace('/Api[\/\]chatDirect.php/','',__FILE__).'library.php');
$chat = new Chat;


##########################################
// ダイレクトチャットで必要になる機能
// 送信ボタンを押した時に投稿内容が登録される
// 空で送信ボタンを押すと登録の処理が行われない
// 自分で作成した投稿に関しては、削除することが可能
// 投稿内容に関していいね、お気に入り登録、返信などをすることができる。(自分の投稿や相手の投稿に関わらず、つけれる)
##########################################
  logger('処理は、来ているよ');
//コメントが入力されいる時は、送信ボタンを押すと登録処理が走る
if(!empty($_POST['direct_chat_create'])){
  dbg('ボタン押されたよ');
  //コメントが入力されていれば登録処理を行う
  if(!empty($_POST['GROUP_CHAT_EXCHANGE_COMMENT_TEXT'])){
    dbg('データがちゃんと来てるよ');
    $chat->setDirectChatExchange($_POST['group_chat_no'],$_POST['GROUP_CHAT_EXCHANGE_COMMENT_TEXT'],$reply_to_dairect_chat_comment_no);
  }else{
    // コメントが入力されていない時は、何も行わない
  }
}else{
  logger('押されていないよ');
}

良かったら教えてください。

Answer 1

    //登録するボタンの情報を作成
    $('button[name="direct_chat_create"]'.each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    }))

ここ

    //登録するボタンの情報を作成
    $('button[name="direct_chat_create"]').each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    })

こうでは？( .eachの前に括弧)

Comments

[aushijima]

記述ミスをしていましたね。ありがとうございます。

Answer 2

なんかtypoが多いし、無駄なものもあるので以下でチェックしてみてください

• html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  var registerNum = 0;
  $(document).on('click','button[name="direct_chat_create"]',function(e){
    e.preventDefault();
    var senddata = new Object();
    $('textarea.commonContent').each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    });
    $('button[name="direct_chat_create"]').each(function(){
      senddata[$(this).attr('id')] = $(this).val();
    });
    $.ajax({
    type: "POST",
    url: "send.php",
    data: senddata,
    }).done(function (senddata) {
      $('.chatRoomCommentBlock').after("<div id=\"new_direct_chat_comment_"+registerNum+"\"></div>");
      $('#new_direct_chat_comment_'+registerNum).html(senddata);
      registerNum++;
    }).fail(function (XMLHttpRequest, textStatus, errorThrown){
      alert(errorThrown);
    });
  });
  
  $(document).on('click','a[id="reply_comment"]',function(){
    var className = $(this).attr('class');
    var directExchangeList = className.split('_');
    var direct_chat_exchange_reply_comment_no = directExchangeList[2];
    var direct_chat_exchange_display_no = directExchangeList[3];
    $('#reply_to').html(
      direct_chat_exchange_display_no+'へ返信する'
      +'<a href="javascript:void(0);" id="reply_cancel">×</a>'
      +'<input type="hidden" class="direct_chat_create" id="direct_chat_exchange_reply_comment_no" value="'+direct_chat_exchange_reply_comment_no+'">'
      );
  });
});
</script>

<div class="chatRoomFooter">
<form method="post" name="chat_direct" enctype="multipart/form-data">
<div class="input textareaParts expand">
<div class="minTextareaParts selfclear">
<div class="textareaWrapper">
<textarea class="commonContent" name="GROUP_CHAT_EXCHANGE_COMMENT_TEXT" id="GROUP_CHAT_EXCHANGE_COMMENT_TEXT" placeholder="コメントを入力"></textarea>
</div>
<div class="functionButton">
<button id="direct_chat_create"  name="direct_chat_create" class="submit direct_chat_create">送信</button>
</div>
</div>
</div>
</form>
</div>
<div class="chatRoomCommentBlock"></div>

• send.php

<?php
$direct_chat_create=filter_input(INPUT_POST,"direct_chat_create");
$GROUP_CHAT_EXCHANGE_COMMENT_TEXT=filter_input(INPUT_POST,"GROUP_CHAT_EXCHANGE_COMMENT_TEXT");

if(!is_null($direct_chat_create)){
  print 'button pushed<br>';
  if(!is_null($GROUP_CHAT_EXCHANGE_COMMENT_TEXT) and $GROUP_CHAT_EXCHANGE_COMMENT_TEXT!==""){
    print 'get data<br>';
  }else{
    print 'no data<br>';
  }
}else{
  print 'button not pushed<br>';
}

Comments

[aushijima]

試してみました。

送信を押すとNot Foundというアラートが出ました。
それと、
function(e)を設定する時は、どのような時なのですか？

また、phpとajaxを使用する時は、emptyよりもfilter_inputやis_nullを使用するのが一般的ですか？

[yambejp]

> Not Found

ajaxのurlと送り先のphpをあわせて下さい

> function(e)を設定する時

buttonタグはsubmitの機能をもっているので、サブミットさせないためには
type="button"を指定するか、eをつかってイベントを殺します

> emptyよりもfilter_input

受け取ったデータを処理するにはfilter_inputがおすすめです
必要に応じていろいろな条件でバリデートできます

[aushijima]

ありがとうございます。ちなみに、php側でデータベースに登録したい時に
urlの中の
chat_direct?group_chat_no=1
group_chat_noの情報などもajaxで送る時も、php側で
$direct_chat_create=filter_input(INPUT_POST,"group_chat_no");
のようにしてあげれば良いですか？

[yambejp]

＞ ?group_chat_no=1

$group_chat_no=filter_input(INPUT_GET,"group_chat_no");

でしょうね。ただしgetとpostを一緒に送るのは混乱の元ですけどね
それがapiの仕様ならしかたないでしょう

[aushijima]

ありがとうございました。無事に表示できました。