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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

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

Q&A

解決済

3回答

6867閲覧

jsとjQueryでもっと見る機能を作りたいと思ってます!

etemon

総合スコア19

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

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

0グッド

5クリップ

投稿2015/08/31 13:28

こんばんは、js入門者です。jsのAjaxとJqueryのJSONを使ってボタンを押すと3件ずつ新しい記事を読み込む「もっと見る」機能を作ろうとしているのですがうまくいきません。もっと見るボタンを押すと同じ記事だけが繰り返されます…コードは下になります。

『サーバーサイド』 $connect=mysql_connect("サーバー","ID","パスワード"); mysql_query("SET NAMES utf8",$connect); $db="データベース"; if (isset($_GET["page"])) { $page=$_GET["page"]; }else{ $page=0; } $sql="SELECT * FROM plan ORDER BY date_time DESC LIMIT $page,3"; $result=mysql_db_query($db,$sql); while($rows=mysql_fetch_assoc($result)){ $jrows[]=array("id"=>$rows["id"],"title"=>$rows["title"],"image"=>$rows["image"],"body"=>$rows["body"],"planner"=>$rows["planner"],"date_time"=>$rows["date_time"]); } echo json_encode($jrows); 『HTML』 //最初は3つの記事を先に見せる $(function() { $.getJSON("サーバーURL" , function(data) { var ulObj = $("#showMore"), len = data.length; for(var i = 0; i < len; i++) { ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].title)); } }); }); //サーバーに要請! function showMore(){ var request=new XMLHttpRequest(); request.onreadystatechange=function(){ var show=document.getElementById("showMore"); var showChild=show.childNodes.length; if (request.readyState==4) { if (request.status==200) { $(function() { $.getJSON("サーバーURL" , function(data) { var ulObj = $("#showMore"), len = data.length; for(var i = 0; i < len; i++) { ulObj.append($("<li>").attr({"id":data[i].id}).text(data[i].title)); } }); }); }else{ show.innerHTML="サーバーにエラーが発生しました!"; } }else{ // } } var show=document.getElementById("showMore"); var showChild=show.childNodes.length; request.open("GET","json_ajax.php?page="+showChild,true); request.send(); } //show_btnのボタンが押されたらshowMoreを実行 document.addEventListener("DOMContentLoaded", function(){ document.getElementById('show_btn').addEventListener('click', showMore, false); }, false); </script>

長くなりましたが整理すると、
①最初HTMLファイルからは、サーバーのPHPファイルからJSON形式のデータを受け取って表示しようとする。

②その時PHPは
if (isset($_GET["page"])) {
$page=$_GET["page"];
}else{
$page=0;
}
$sql="SELECT * FROM plan ORDER BY date_time DESC LIMIT $page,3";
となっているため$pageは0になり、最新の記事3つだけ返す。(ここまではいいんです)

③今度はもっと見るボタンを押して、すでに表示されている記事の3つ前の記事を3つ表示いようとするが、なぜか同じ記事がまた表示される(これの繰り返し)。。。ということになります。

原因はなんでしょうか?そしてうまく動作させるためにはコードをどう変えたらいいでしょうか?長文で申し訳ないのですがぜひ皆さんの知恵をお借りしたいです!おろしくお願いします!

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

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

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

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

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

guest

回答3

0

ベストアンサー

jQuery を使うなら、javascript 部分は全てjQuery の記法で表現する方がメンテしやすい。

html

1<!DOCTYPE HTML> 2<html lang="ja-JP"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="article"> 9 <div id="button"> 10 <button id="btn-continue" type="button">もっと読む</button> 11 </div> 12 </div> 13 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 14 <script type="text/javascript"> 15 $(function () { 16 var curPage = 0; 17 var params = null; 18 19 $("#btn-continue").on('click', function () { 20 var url = 'ajax.php'; 21 params = { 22 page: curPage 23 }; 24 $.getJSON(url, params, function (json) { 25 if (json) { 26 $.each(json, function (obj, val) { 27 var html = '<div>'; 28 html += '<div>'; 29 html += val.id; 30 html += '</div>'; 31 html += '<div>'; 32 html += val.title; 33 html += '</div>'; 34 html += '<div>'; 35 html += val.body; 36 html += '</div>'; 37 html += '</div>'; 38 $("#button").before(html); 39 }); 40 curPage++; 41 } 42 }); 43 }).click(); 44 }); 45 </script> 46 </body> 47</html>

ajax で呼ばれるPHP部分、mysql_*系関数はすでに「非推奨」です。リファレンスを参照してください。
mysql_connect

事情があって使わざるを得ないとしても、提示のコードではSQLインジェクションの脆弱性があります。適切にエスケープしなければなりません。

php

1<?php 2 3//ajax.php 4 5$dsn = 'mysql:dbname=test;host=localhost;charset=utf8'; 6$username = 'root'; 7$passwd = 'password'; 8$options = array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION); 9header('Content-Type: application/json'); 10 11try { 12 $objPdo = new PDO($dsn, $username, $passwd, $options); 13 14 $sql = "SELECT * FROM post LIMIT ?, 3"; 15 $stmt = $objPdo->prepare($sql); 16 $start = 3 * (int) filter_input(INPUT_GET, 'page'); 17 $stmt->bindValue(1, $start, PDO::PARAM_INT); 18 $stmt->execute(); 19 $res = $stmt->fetchAll(); 20 21 echo json_encode($res); 22} catch (PDOException $e) { 23 echo json_encode($e); 24} 25

firebugなど使えば、下図のように、ちゃんとパラメータの確認とかできます。
イメージ説明

投稿2015/08/31 14:38

編集2015/08/31 15:27
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

etemon

2015/08/31 15:06

回答ありがとうございます! mysql関数が非推奨になってることは知ってます。でもまだうまく動くし癖になっちゃって、、、今回を機会に癖直します! Js入門者でいろんな書籍を参考にして作ったコードなのですが、確かにJQueryにすると使いやすいですね。もし今回のコードのどこを直したらいいかは見つかりましたか?まだJQueryに慣れてなくて、、、
退会済みユーザー

退会済みユーザー

2015/08/31 15:10 編集

どこというか、すでに提示のコードは一切参考にしていません。ほとんど書き直しなので… 私が書いたコードをそのまま環境に合わせて変更すればそのまま動きます。
退会済みユーザー

退会済みユーザー

2015/08/31 16:04 編集

既存のコードで原因を追求したいのであれば、HTMLを追記してください。
Ken.sakanakana

2015/08/31 16:26

せめて、mysql_query_params にして、プレースホルダ化すれば脆弱性は回避できますかね:-)
guest

0

いろいろと突っ込みどころがありますが、バグの原因は、
XMLHttpRequest
が全く生かされていないで、
request.onreadystatechange
の中の
$.getJSON("サーバーURL" , function(data) {
で再び、json_ajax.phpが"サーバーURL"として呼び出されている、
そこのURLにpageパラメータが入っていないことかと思われます。

投稿2015/09/02 14:51

mocats

総合スコア30

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

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

0

sourceを全部よんでませんが、SQLにoffsetが無いことから、JSONで既読位置をサーバサイドプログラムにわたし、OFFSETで開始位置をずらしてあげる必要がありそうです。

投稿2015/08/31 13:54

Ken.sakanakana

総合スコア1768

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

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

tanat

2015/08/31 14:38

MySQL的には "SELECT * FROM plan ORDER BY date_time DESC LIMIT 2,3"; で 2がOFFSETとして評価されるので $pageが正確に渡されればクエリ自体は間違ってはいませんね。 *セキュリティ的な問題点はありますが・・
etemon

2015/08/31 15:11

最初に読み込むのはうまく読み込んでいるんですよー でももっと読み込むボタンを押すと、同じ記事ばかり出てくることを見ると、開始位置が0のままのようです、、、$pageがちゃんと渡ってから読み込んでいるかが疑わしいです。
etemon

2015/08/31 15:13

tanatさん> 僕もそう思っています! でもAjaxのコードでデータベースに書き込むことにも成功していますので、$page自体はちゃんと渡っていると思います。 きになるのは$pageが渡ってから読み込んでるかどうかです、、、
Ken.sakanakana

2015/08/31 16:01

なるほど失礼しました! ブラウザのデバッグ機能でGETされている値がどうなっているか、 サーバサイドでの$pageの値がどうなっているかを調べればよいのでしょうか。 "サーバーURL"が、アクセスしたページと同じであるとか。 も、気になるところです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問