お世話になります。
以下の点につきまして、お知恵をお借りできますと幸いでございます。
宜しくお願い致します。
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.'; } ?>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/12/21 12:08