質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • Ajax

    1156questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

ajaxで’いいねボタン’のような機能を作っていますが、一回再読み込みしないと反応しないです

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,001

kazoogon

score 240

[me tooボタン]というボタンがあり、クリックすると[you too 1]というようにajaxを使って非同期で変わる機能を作っています(いいねボタンと一緒です)。
またデータベースにuser.idとカウント数を入れていますが、それは正常に作動します。
しかしme tooボタンをクリックするとalertでerrorが出て、再読み込みするとyou tooボタンにちゃんと切り替わっていてカウントも増えています。
怪しいところはajaxのsuccessの中のjqueryを使ったcss書き換え部分だとは思っていますが。。。どうもうまくいきません

view画面

<div class="buttons"> 
    //if文で分けているのは一度押していたらyou_tooボタン、押していなかったらme tooボタンを表示させるという意味です
    <?php if(in_array($value['id'],$me_too_list,TRUE)===TRUE){ ?>
         <button class="you_too" disabled>you too!<?php echo $value['count_me_too']; ?></button>
    <?php }else{ ?>    
         <button class="me_too" value="<?php echo $value['id'] ?>">me too!<?php echo $value['count_me_too']; ?></button>
    <?php } ?>
</div>    

ajax部分

$(function(){
    $('.me_too').click(function(){ 
        $container=$(this);
        $.ajax({
            type: "POST",
            url: "ajax_me_too.php",
            //dataType:'json',(←これを書いても書かなくても挙動は一緒でした)
            data: {
                video_id : $(this).val(), //いいねボタン押した記事のid番号のようなものだと思っていただければokです
                user_id : <?php echo $user_id; ?> //誰が押したかのuser_id
            },  
            success: function(json)
                {  
                    $container.removeClass('me_too').addClass('you_too').html('you too!'+json['count']).prop('disabled', true);
                },
            error: function(XMLHttpRequest,textStatus,errorThrown)
                {
                    alert('error');
                }
        }); 
        return false;
    });
});    

ajax送った側のphpファイル

<?php 
header("Content-Type: application/json; charset=utf-8");

$user_id=$_POST['user_id'];
$video_id=$_POST['video_id'];

require_once('/index_model.php');//モデルファイルの読み込み
require_once('/define.php');//データベース読み込み情報を定義したファイル

$link=db_connect();

 //metooボタン押したときの情報(user_id,video_id)をINSERTでDBに渡す  
    if(who_clicked_insert($link,$user_id,$video_id)===FALSE){
        $error_for_me[]="ajax metooボタンアップロード失敗";
    }
    //me tooボタン合計数の取得
    if(($result=select_me_too($link,$video_id))===FALSE){
        $error_for_me[]="ajax metoo select失敗";
    }

    $count=$result[0]['count_me_too']; 
    $array_count=array('count'=>$count);
    echo json_encode($array_count); 

cssファイル

.me_too{
    background-color:#00FF00;
    color:white;
    width:105px;
    height:40px;
    font-size:20px;
    border-radius:10px;
}
.you_too{
    background-color:#FE2E64;
    color:white;
    width:105px;
    height:40px;
    font-size:20px;
    border-radius:10px;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

とりあえず

error: function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}


でエラーの種類を拾ってください
デバッグの間は

dataType:'text',

にしておいたほうがいいと思います

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 21:56

    回答ありがとうございます。
    おっしゃられた通りにするとcssは効きましたが、jsonで取ってきた値(count)がundefinedとなりました。これはたぶんdataType:'text'だからでしょうか??
    またdatatype:'json'(jsonpでも試しました)にするとエラーを知らせるalertにはparse errorと出てきました。

    キャンセル

  • 2017/02/02 22:03 編集

    'json'にするとparse errorになるのは$.ajaxあるあるですね。
    サーバー側がきちんとしたjson形式で返してくれていないのです。
    見方としてはdatatype:'text'でとってくるデータを
    success: function(data){
    console.log(data);
    }
    で確認して、きちんとフォーマットがjsonになるまで
    ajax_me_too.phpを調整することです
    いけると思った時点でdatatype:'json'で再度チェックしてください

    キャンセル

  • 2017/02/02 23:52

    回答ありがとうございます。
    console.logで調べた結果は{"count":"1"}となっていましたが、正直これのどこが間違いだかわかりません汗

    キャンセル

  • 2017/02/03 13:14 編集

    dataType:’text’ でながして {"count":"1"} を本当にうけとっているなら
    dataType:’json’ であればobjectとして受け取れるはずですね
    もう一度確認ですがdataType:’json’ にするとパースエラーで間違いないですか?
    もしそうならなにかゴミデータがまざっていたりしませんか?

    キャンセル

  • 2017/02/03 14:28

    同時にメールを自動送信するよう設定していたデータが出力されていました
    2017-02-03 04:56:13 CLIENT -> SERVER: EHLO (url名)
    2017-02-03 04:56:13 CLIENT -> SERVER: STARTTLS
    2017-02-03 04:56:13 CLIENT -> SERVER: EHLO (アドレス名)
    2017-02-03 04:56:14 CLIENT -> SERVER: AUTH LOGIN
    2017-02-03 04:56:14 CLIENT -> SERVER: aXNpdGp1c3RtZWthenVAZ21haWwuY29t
    2017-02-03 04:56:14 CLIENT -> SERVER: a2F6b29nb24=
    2017-02-03 04:56:15 CLIENT -> SERVER: MAIL FROM:<(アドレス名)>
    2017-02-03 04:56:15 CLIENT -> SERVER: RCPT TO:<(アドレス名)>
    2017-02-03 04:56:15 CLIENT -> SERVER: DATA
    2017-02-03 04:56:16 CLIENT -> SERVER: Date: Fri, 3 Feb 2017 13:56:12 +0900
    2017-02-03 04:56:16 CLIENT -> SERVER: To: (アドレス名)
    2017-02-03 04:56:16 CLIENT -> SERVER: From:
    2017-02-03 04:56:16 CLIENT -> SERVER: Subject: (送信する内容)
    2017-02-03 04:56:16 CLIENT -> SERVER: Message-ID: <88a2bb94ee5bb82e8ed3c5a7fe545dee@(url名)>
    2017-02-03 04:56:16 CLIENT -> SERVER: X-Mailer: PHPMailer 5.2.22 (https://github.com/PHPMailer/PHPMailer)
    2017-02-03 04:56:16 CLIENT -> SERVER: MIME-Version: 1.0
    2017-02-03 04:56:16 CLIENT -> SERVER: Content-Type: text/plain; charset=utf-8
    2017-02-03 04:56:16 CLIENT -> SERVER:
    2017-02-03 04:56:16 CLIENT -> SERVER: (送られる文章の内容)
    2017-02-03 04:56:16 CLIENT -> SERVER:
    2017-02-03 04:56:16 CLIENT -> SERVER: .
    2017-02-03 04:56:16 CLIENT -> SERVER: QUIT
    Message has been sent

    以下のファイルが原因だと思います
    <?php
    require_once ( 'PHPMailerAutoload.php' );
    function send_mail($to,$subject,$body,$fromname){
    $from = "(自分のアドレス)@gmail.com";
    $smtp_user = "(自分のアドレス)@gmail.com";
    $smtp_password = "";

    $mail = new PHPMailer();
    $mail->IsSMTP();
    $mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
    $mail->SMTPAuth = true;
    $mail->CharSet = 'utf-8';
    $mail->SMTPSecure = 'tls';
    $mail->Host = "smtp.gmail.com";
    $mail->Port = 587;
    $mail->IsHTML(false);
    $mail->Username = $smtp_user;
    $mail->Password = $smtp_password;
    $mail->SetFrom($smtp_user);
    $mail->From = $fromaddress;
    $mail->Subject = $subject;
    $mail->Body = $body;
    $mail->AddAddress($to);

    if( !$mail -> Send() ){
    $message = "Message was not sent<br/ >";
    $message .= "Mailer Error: " . $mailer->ErrorInfo;
    } else {
    $message = "Message has been sent";
    }

    echo $message; //←**ここを消しましたが他のデータの消し方が分かりません。**
    }

    ?>

    キャンセル

  • 2017/02/03 14:36

    意図しないで出力されるデータを消してしまうならバッファリングを
    利用してください
    <?php
    ob_start();
    ・・・・
    ob_end_clean();
    print "出力したい文字";
    ?>

    キャンセル

  • 2017/02/03 15:53

    このように追記しましたがまだ出力されます。何か勘違いしていますか??
    <?php
    require_once ( 'PHPMailerAutoload.php' );
    function send_mail($to,$subject,$body,$fromname){
    ob_start();
    $from = "(自分のアドレス)@gmail.com";
    $smtp_user = "(自分のアドレス)@gmail.com";
    $smtp_password = "";

    $mail = new PHPMailer();
    $mail->IsSMTP();
    $mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
    $mail->SMTPAuth = true;
    $mail->CharSet = 'utf-8';
    $mail->SMTPSecure = 'tls';
    $mail->Host = "smtp.gmail.com";
    $mail->Port = 587;
    $mail->IsHTML(false);
    $mail->Username = $smtp_user;
    $mail->Password = $smtp_password;
    $mail->SetFrom($smtp_user);
    $mail->From = $fromaddress;
    $mail->Subject = $subject;
    $mail->Body = $body;
    $mail->AddAddress($to);
    ob_end_clean();

    if( !$mail -> Send() ){
    $message = "Message was not sent<br/ >";
    $message .= "Mailer Error: " . $mailer->ErrorInfo;
    } else {
    $message = "Message has been sent";
    }
    }

    ?>

    キャンセル

  • 2017/02/03 16:09

    ユーザー関数send_mail()はどこからも呼ばれていないようにみえますが。
    それとrequireの前「<?PHP」直後の行からob_start()して、
    最後の行近くでob_end_clean()してください
    出力したい文字は、変数か何かにうけといて、ob_end_clean()した
    あとにecho(print)してください

    キャンセル

  • 2017/02/03 16:27

    できました!! 回答ありがとうございました、勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Ajax

    1156questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • トップ
  • Ajaxに関する質問
  • ajaxで’いいねボタン’のような機能を作っていますが、一回再読み込みしないと反応しないです