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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ajax

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

Q&A

解決済

1回答

2941閲覧

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

kazoogon

総合スコア281

Ajax

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

0グッド

0クリップ

投稿2017/02/02 09:50

[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; }

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

とりあえず

javascript

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

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

dataType:'text', ```にしておいたほうがいいと思います

投稿2017/02/02 11:36

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2017/02/02 12:56

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

2017/02/02 13:04 編集

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

2017/02/02 14:52

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

2017/02/03 04:14 編集

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

2017/02/03 05: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; //←**ここを消しましたが他のデータの消し方が分かりません。** } ?>
yambejp

2017/02/03 05:36

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

2017/02/03 06: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"; } } ?>
yambejp

2017/02/03 07:09

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

2017/02/03 07:27

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問