前端交互，前端與php後臺 Ajax 進行數據交互的三種數據形式(1)-字符串

做爲小白，之前的前端只是負責前端，但如今已時移俗易。不少公司已經先後端分離，若是止步不前，最終只會守護一畝三分地，這篇就做爲小白個人進階基礎筆記吧！（特感謝李南江老師提供的教學視頻）。

html代碼結構：

        <div>
            <p id="title">商品標題名稱</p>
            <img src="" alt="">
            <p id="des">商品描述信息</p>
            <button name="nz">女裝</button>
            <button name="bb">包包</button>
            <button name="tx">拖鞋</button>
        </div>

 

Js代碼:

<script type="text/javascript">
            window.onload=function(){
                // 1.獲取須要設置的元素
                var oTitle = document.querySelector("#title");
                var oDes = document.querySelector("#des");
                var oImg = document.querySelector("img");
                // 2.獲取全部按鈕
                var oBtns = document.querySelectorAll("button");
                // 3.給按鈕添加點擊事件
                oBtns[0].onclick = function () {
                    var self=this;
                    //4.發送ajax請求到服務器
                    $.ajax({
                        type:"get",
                        url:"10-ajax-test.php",
                        async:true,
                        data:{"name":this.getAttribute("name")},
                        success:function(xhr){
                            console.log(xhr)
                            var res = xhr.toString().split("|");
                            console.log(res);
                            oTitle.innerHTML = res[0];
                            oDes.innerHTML = res[1];
                            oImg.setAttribute("src",res[2] );
                        },
                        error:function(){
                            
                        }
                    });
//                    ajax({
//                        type:"get",
//                        url:"10-ajax-test.php",
//                        data:{"name":this.getAttribute("name")},
//                        timeout: 3000,
//                        success: function (xhr) {
//                            var res = xhr.responseText.split("|");
//                            console.log(res);
//                            oTitle.innerHTML = res[0];
//                            oDes.innerHTML = res[1];
//                            oImg.setAttribute("src",res[2] );
//                        },
//                        error: function (xhr) {
//                            alert(xhr.status);
//                        }
//                    });
                }
            }
        </script>

php代碼：

<?php

// 1.定義字典保存商品信息
$products = array("nz"=>array("title"=>"甜美女裝", "des"=>"人見人愛,花間花開,甜美系列", "image"=>"images/1.jpg"),
    "bb"=>array("title"=>"奢華驢包", "des"=>"送女朋友,送情人,送學妹,一送一個準系列", "image"=>"images/2.jpg"),
    "tx"=>array("title"=>"鍵盤拖鞋", "des"=>"程序員專屬拖鞋, 屌絲氣息濃郁, 你值得擁有", "image"=>"images/3.jpg"));
// 2.獲取前端傳遞的參數
$name = $_GET["name"];
//echo $name;
// 3.根據前端傳入的key,獲取對應的字典
$product = $products[$name];
//print_r($product);
// 4.將小字典中的內容取出來返回給前端
echo $product["title"];
echo "|";
echo $product["des"];
echo "|";
echo $product["image"];
/**/