JavaScript, JQueryの学習

著者：津路高広

公開日：2021/12/11

最終更新日：2021/12/11

カテゴリー：技術情報

津路です。
最近は、Webプログラミングに少し入っています。
その過程で、JavaScriptを書こうとして、サンプルを動かしてみて、まったく動かず、Time Spentしてしまいました。

htmlからphpプログラムを呼び出して、現在日付を取得して、その結果をページに表示する、という簡単な仕組みです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
<form>
  <input type="button" id="btn" value="現在日時"/>
  <p id="result"></p>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script>
$(function() {
  $('#btn').click(function(e){
    $('#result').load('current.php');
  });
});
</script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</form>

$(function() {

$('#btn').click(function(e){

$('#result').load('current.php');

});

</script>

</body>

</html>

PHP側

<?php
print('現在日時:'.date('Y年m月d日 H:i:s'));
?>

<?php

print('現在日時:'.date('Y年m月d日 H:i:s'));

この状態でページをデバッグすると、
Uncaught TypeError: $(…).load is not a function
というエラーです。
調べると、このコーディングは、2014年ごろのものです。

ですので、jquery側のプログラムを変更しようとして、調べました。
最初は、さっぱりわかりませんでした。
基礎からというわけで、
$(“#button”).on(“click”, function(){
var newText = $(“#text”).val();
$(“#string”).text(newText);
});
や、

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
<div id="txt_field"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const file_name = "sample"; //読みだすtxtファイル名
const element = document.getElementById('txt_field');

jQuery.ajax({
    
    type: 'post',
    url: 'http://tsujit.minibird.jp/sample/jquery-test/function.php', //送信先PHPファイル
    data: {'func' : 'get_txt_content', 'argument': file_name }, //POSTするデータ
    success: function(content){ //正常に処理が完了した時
        
        element.innerHTML = "<p>" + content + "</p>";
        
    }

});</script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

const file_name = "sample"; //読みだすtxtファイル名

const element = document.getElementById('txt_field');

jQuery.ajax({

type: 'post',

url: 'http://tsujit.minibird.jp/sample/jquery-test/function.php', //送信先PHPファイル

data: {'func' : 'get_txt_content', 'argument': file_name }, //POSTするデータ

success: function(content){ //正常に処理が完了した時

element.innerHTML = "<p>" + content + "</p>";

}

});</script>

</body>

</html>

をあるページからいただいて、実行OK.　jqueryのslim版ではエラーとなるので、通常版にしたり。

そして、次のコーディングにしてOK.

<script>
function test(){
    $.ajax({
      url:"current.php", 
      success:function(result){
        $("#result").text(result);
      }
    })
}
</script>
または、
<script>
function test(){
    $.get(
      "current.php", {id:1},
        function(result){
          $("#result").text(result);
        }
    )
}
</script>

function test(){

$.ajax({

url:"current.php",

success:function(result){

$("#result").text(result);

}

})

}

</script>

または、

function test(){

$.get(

"current.php", {id:1},

function(result){

$("#result").text(result);

}

)

}

</script>

ローカルで実行すると以下のエラーが出ます。サーバーで実行します。

やっとできました。