ajaxによるデータベースとの通信

前提・実現したいこと

ajaxでデータベースより、スクロールが一番下まで来たら内容を更新するものを作っています。
最初の、データベースとの通信およびデータの取得はできているもののajaxがうまく機能せずそれ以降は取得できません。
どのようにすればいいかご教授賜りたく質問しました。

機能しない、とは想定では一番下までスクロールしたら次の結果（dbのidが９～１７）を取得できるようにしたいです。

該当のソースコード

php
1load-more.php
2<!DOCTYPE html>
3
4<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
5<head>
6    <meta charset="utf-8" />
7    <title>ajax sqlite psdo</title>
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9</head>
10<body>
11<a href="https://codeamend.com/blog/infinite-scrolling-on-php-website-using-jquery-and-ajax-with-example/">参考</a>
12<?php
13try {
14$pdo = new PDO("sqlite:test.db",'','',[PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
15//fetch data from database
16$sql = "SELECT * FROM blog ORDER BY id ASC LIMIT 8";
17if($_GET){
18    //fetch data from database
19$sql = "SELECT * FROM blog WHERE id < '".$_GET['last_id']."' ORDER BY id DESC LIMIT 8";
20}
21$res = $pdo->query($sql);
22} catch (PDOException $e) {
23die('database error : ' . $e->getMessage());
24}?>
25<h1>内容</h1>
26<?php while( $row= $res->fetch(PDO::FETCH_NUM) ) {?>
27<div class="postid" id="<?php echo $row[0]; ?>">
28    <h2><a href=""><?php echo $row[0]; ?><?php echo $row[1]; ?></a></h2>
29    <p><?php echo $row[2]; ?>
30    </p>
31    <hr style="margin-top:5px;">
32</div>
33<?php } ?> 
34<script>
35$(window).scroll(function() {
36    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
37        var last_id = $(".postid:last").attr("id");
38        loadMore(last_id);
39    }
40});
41
42function loadMore(last_id){
43  $.ajax({
44      url: 'load-more.php?last_id=' + last_id,
45      type: "get",
46      beforeSend: function(){
47          $('.ajax-load').show();
48      }
49  }).done(function(data){
50      $('.ajax-load').hide();
51      $("#post-data").append(data);
52  }).fail(function(jqXHR, ajaxOptions, thrownError){
53      alert('server not responding...');
54  });
55}
56</script> 
57</body>
58</html>

m.ts10806

2021/06/01 23:33

load-more.phpのコードはどこでしょう「機能しない」とは何が起きてるのでしょう getならURL直アクセスでリクエスト処理されますがそういった確認やデバッグはされましたか？あとDBは２つ使ってるのでしょうか

退会済みユーザー

2021/06/01 23:59 編集

dbは、一つです機能しない、とは想定では一番下までスクロールしたら次の結果（dbのidが９～１７）を取得できるようにしたいです。デバックはしました。これ自体が load-more.phpにしています。

m.ts10806

2021/06/02 00:02 編集

ではMySQL関係ないですね。あと必要な情報が提示されてません（こちらのヒアリングの半分も答えてもらってません）「した」だけで伝わる情報はゼロなので、何をどうやって、どんな結果が出てその結果を以てどう対応したか　まで詳細に記載してください。デバッ"ク"　としてる時点で出来てないと感じています。

m.ts10806

2021/06/02 00:08

ああ、あとから編集追記されたんですね。 >これ自体が load-more.phpにしています。

行動規範の内容に同意します

回答1件

ベストアンサー

Ajaxは非同期通信で必要な処理をして必要な情報だけを得る技術です。
もし同じページ内に埋め込む情報を得るのでしたら、doctype含めた全htmlとかJavaScript込のコードを受け取るなんてことはないです。
部分が欲しいなら部分だけ出力するか、json形式でデータだけ受け取ってJavaScriptでhtml組んで部分を生成し組み込むかどちらかになります。

リクエストを送信する自身に対してリクエストすることはやらず、Ajax用のリクエストを受け付け必要な情報だけをレスポンスとするPHPプログラムを別途設けます。
PHPタグ外は全部出力となりますので。

初期表示のデータ取得も画面ロード時のイベントおこしてAjaxでやれば画面表示プログラムにはPHP一切書かずにできます。

投稿2021/06/02 00:08

編集2021/06/02 00:15

m.ts10806

総合スコア80875