PHP + JavaScript + Ajax を使用して非更新ページ読み込み効果を実現します (写真)-PHPチュートリアル-php.cn

PHP + JavaScript + Ajax を使用して非更新ページ読み込み効果を実現します (写真)

黄舟

リリース： 2023-03-06 14:34:01

オリジナル

1482 人が閲覧しました

今日の実験のアイデアは、更新せずにページの読み込み効果を実現することです。具体的なアイデアは、PHP を使用してバックエンドを開発し、フロントエンド用のデータを準備し、次に Ajax テクノロジーをデータポーターとして使用してサーバーからフロントエンドにデータをプルし、最後に JavaScript テクノロジーを使用して取得したデータを処理して表示することです。ページにあります。

Data Source Factory

この実験データは Json 形式で送信され、処理されます。 json 文字列を生成するには、以下の 2 つの方法があります。

Json生成方法1

PHPにはjson_encode()メソッドとjson_decode()メソッドが付属しています。ただし、デコード方法はブラウザ自体の動作原理によって決定されるため、一般的には使用されません。 Json 文字列を生成するときは、エンコードするデータを json_encode() に渡すだけです。

$obj = arr("first"=>"first_value","second"=>"second_value","three"=>"three_value");
$encode_data = json_encode($arr);
var_dump($encode_data);

ログイン後にコピー

Json 生成方法 2

最初の方法と比較すると、2 番目の方法は手動で生成されるため自動化度が低くなりますが、それでも少量のデータを処理する場合には非常に高速です。

注: 2 番目の方法を使用する場合は、文字列の外側には必ず一重引用符を使用し、内部のキーと値のデータには二重引用符を使用してください。

<?php
header("Content-Type:text/html;charset=utf-8");// 制作一个Json信息
echo &#39;{"city":"大连","temp":"27°C","WD":"东南风"}&#39;;
?>

ログイン後にコピー

デモの便宜上、ここでは 2 番目の方法を採用します。

データポーター

ポーターとは何ですか? ここでは、サーバーにデータを要求し、取得したデータを要求元のクライアントに返します。ここでの Ajax はそのような機能です。

次のコードは、ajax オブジェクトを作成して機能させる方法を示しています。

<script>
        function f1(){
            alert(&#39;即将弹出数据&#39;);            
            var ajax;           
             if(window.XMLHttpRequest){
                ajax = new XMLHttpRequest();
            }else{
                ajax = new ActiveObject("Microsoft.XMLHTTP");
            }            // 给Ajax设置事件
            ajax.onreadystatechange = function(){
                if(ajax.readyState==4){
                    alert(ajax.responseText);
                    document.getElementById(&#39;response&#39;).innerHTML=ajax.responseText;
                }
            }            // 如果以GET请求方式请求数据的话，为了防止特殊字符，及中文的干扰我们要使用JavaScript的一个encodeURIComponent(raw_data);进行安全编码
            ajax.open(&#39;get&#39;,&#39;./forajax.php&#39;);            
            // 使用POST请求方式的时候，其原理是模拟表单提交，所以需要加上头信息,但是要放到open方法后面
            ajax.setRequestHeader("content-type","application/x-www-urlencoded");
            ajax.send(null);
        }    </script>

ログイン後にコピー