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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

解決済

1回答

2244閲覧

PHP ajax通信を行った際のデータの受け渡し(ローカルとサーバー環境下での違い)

退会済みユーザー

退会済みユーザー

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

0クリップ

投稿2017/12/21 11:27

編集2017/12/21 12:07

お世話になります。
以下の点につきまして、お知恵をお借りできますと幸いでございます。
宜しくお願い致します。

1、やりたいこと
ajaxを使って、ボタンをクリック(OnLinkClick2)すると、該当ID(content_id)を
サーバーへ渡し、データベース処理を行った後に、
いくつかのデータをクライアントへ返し、クライアントで受け取ったデータを
元にjavascriptでhtmlを書き換えること

2、問題、つまづいていること
ローカル環境で実行した時は一連の流れを問題なく動作したのですが、
ロリポップのサーバーにアップロードすると、一部動かなくなってしまいました。

サーバー環境下で動いている部分:サーバーへ該当IDを渡し、サーバー側で処理を行った後、
クライアントサイドへ連想配列を返すこと

サーバー環境下で動いていない部分:通信が成功した後にクライアント側でデータを受け取ること
(var width = data['width’];〜以降)

ローカル環境とサーバーアップロード後の違い
・googleディベロッパーツールのネットワークで確認すると、
レスポンスでは以下のデータが返って来ているのですが、ローカル環境では
一行目に記載(文字に色付き)されているが、サーバー環境下では3行目(黒字のみ)に記載されている

{"width"44,"good":"12","bad":"0","color":"#808080","font_weight":"bold","goodrate":100,"badrate":0,"rank":"3"}

3、お伺いしたい事項
どこか原因で動作しなくなってしまったのか、見立てが
ついておらず、お力をお借りできますと幸いでございます。
宜しくお願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head class=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <link rel="stylesheet" href="style.css" type="text/css"> <script> function OnLinkClick2(element) { var id = element.id; var name = (element.name)-1; var data = {content_id : id,rank:name}; $.ajax({ type: "POST", url: "http:/***/wordpress/wp-content/themes/***/***.php", data: data, success: function(data,dataType) { var width = data['width']; var good = data['good']; var bad = data['bad']; var color = data['color']; var font_weight = data['font_weight']; var goodrate = data['goodrate']; var badrate = data['badrate']; var i = data['rank']; var tag = document.getElementsByClassName("comment_width"); tag[i].style.width=(width)+"px"; tag[i].style.background="white"; var tag2 = document.getElementsByClassName("comment_good"); tag2[i].style.width=(goodrate)+"%"; tag2[i].innerHTML=good; var tag3 = document.getElementsByClassName("comment_bad"); tag3[i].style.width=(badrate)+"%"; tag3[i].innerHTML=bad; var tag4 = document.getElementsByClassName("comment_text"); tag4[i].style.color=color; }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('Error : ' + errorThrown) ; } }); return false; } </script> </head> <body> <form action="" method="post"> <input type="hidden" id="cont_id" value="<?php echo $comment_id; ?>"> <input type="button" onclick="OnLinkClick2(this);" id="<?php echo $comment_id; ?>" value="いいね" class="review_up" name="<?php echo $rank; ?>"> </form> </body>
<?php header('Content-type: application/json'); if(isset($_POST['content_id'])) { $content_id = $_POST['content_id']; $rank = $_POST['rank']; require("db-connect.php"); $sql10 = "SELECT * FROM comment_table WHERE`comment_id`=$content_id"; $result10 = $mysqli -> query($sql10); $data10 = $result10 -> fetch_array(); $count = $data10['good']; $good = $count + 1; $stmt11 = $mysqli -> prepare("UPDATE comment_table SET good=? WHERE `comment_id`=$content_id"); $stmt11 -> bind_param('i',$good); $result11 = $stmt11 -> execute(); if(!$result11){echo $mysqli -> error;} //再度lenthとパーセンテージ算出 $sql13 = "SELECT * FROM comment_table WHERE `comment_id`=$content_id"; $result13 = $mysqli -> query($sql13); $data13 = $result13 -> fetch_array(); $good = $data13['good']; $bad = $data13['bad']; //パーセンテージ計算 $totalrep = $good + $bad; if($totalrep==0) { $goodrate = 0; $badrate = 0; //文字色と大きさ指定 $color = "#808080"; $font_weight = "normal"; $backcolor = "#808080"; }else { $goodrate = ($good/$totalrep)*100; $badrate = 100 - $goodrate; $sum = $good - $bad; //文字色と大きさ指定 //+-10以上 if($sum >= 10 and $sum < 30) { //10以上30未満で太字にする $color = "#808080"; $font_weight = "bold"; }elseif($sum >= 30) { //+-30以上で青字で太字にする $color = "#1e90ff"; $font_weight = "bold"; }else { //通常時の文字設定設定 $color = "#808080"; $font_weight = "normal"; } } //barlengh if($totalrep==0) { $width = "20"; $good = ""; $bad = ""; }elseif($totalrep >= 1 && $totalrep <= 200) { $width = ($totalrep * 2) + 20; }elseif($totalrep >= 201) { //長さは最大バーで一律 $width = 420; } //クライアントへ返すデータ $return = array( 'width' => $width, 'good'=>$good, 'bad'=>$bad, 'color'=>$color, 'font_weight'=>$font_weight, 'goodrate'=>$goodrate, 'badrate'=>$badrate, 'rank'=>$rank ); print(json_encode($return)); //finish ここまでの変数をクライアントに返す }else{ echo 'The parameter of "request" is not found.'; } ?>

<参考>
・サーバー環境でのレスポンス
イメージ説明

・ローカル環境下でのレスポンス
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

JSONの処理ですか?
$.ajax()内で、dataType:'JSON',
を宣言してみてはどうでしょうか?

むしろローカルの方が不思議な改行が2つあたまにあるので
なにかゴミを拾っているようにみますが

投稿2017/12/21 12:05

yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2017/12/21 12:08

ありがとうございます! 失礼しました、最後の画像は逆でした... ご教示頂いた通りサーバー側は改行が2つあるので何を拾っているのか 掘っていこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問