作为小白,以前的前端只是负责前端,但现在已时移俗易。很多公司已经前后端分离,如果止步不前,最终只会守护一亩三分地,这篇就作为小白我的进阶基础笔记吧!(特感谢李南江老师提供的教学视频)。
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"]; /**/