前端交互，前端与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"];
/**/