JSONP通過ID貨物商品信息

- 準(zhǔn)備環(huán)境：兩個端口不一樣，構(gòu)成跨域請求的條件。

- 獲取數(shù)據(jù)的網(wǎng)址：http://www.a.com 本機(jī)地址：http://www.php.com

- goods.html 通過點(diǎn)擊事件查看商品信息(本地文件)

- goods.php 處理商品信息，返回

演示代碼：goods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>點(diǎn)擊按鈕獲取商品信息</title>
</head>
<body>
    <button>查看</button>
    <script>
        function handle(data)
        {
            console.log(data);
            var ul = document.createElement("ul");
            var obj = JSON.parse(data);
            ul.innerHTML += '<li>' + obj.title + '</li>';
            ul.innerHTML += '<li>' + obj.goods.type + '</li>';
            ul.innerHTML += '<li>' + obj.goods.goodname + '</li>';
            ul.innerHTML += '<li>' + obj.goods.price + '</li>';
            document.body.appendChild(ul);
        }
       var but =document.querySelector("button");
       but.addEventListener("click",function()
       {
            var script = document.createElement("script");
            script.src = "http://www.a.com/goods.php?id=2&jsonp=handle";
            document.head.appendChild(script);
       });
    </script>
</body>
</html>

演示代碼：goods.php


<?php
header("Content-type:text/html;charset=utf-8");
//設(shè)置默認(rèn)字符集
$id = $_GET['id'];
$callback = $_GET['jsonp'];
$goodss = [
    '{"type":"大家電","goodsname":"電視機(jī)","price":"3200"}',
    '{"type":"通訊設(shè)備","goodsname":"小米10 pro","price":"6800"}',
    '{"type":"通訊設(shè)備","goodsname":"蘋果12 pro","price":"13200"}',
    '{"type":"辦公設(shè)備","goodsname":"聯(lián)想Thinkpad","price":"6200"}',
    '{"type":"家居","goodsname":"羅萊家紡","price":"530"}'
];
//由于傳入ID的值從1開始，通過$id-1才能得到查詢的正確id
if(array_key_exists(($id-1),$goodss))
{
   //查詢$goods中鍵值等于$id的商品。
   $goods = $goodss[$id-1];
}
// $json = '{}';   定義josn格式 
$json = '{
      "title":"商品信息",
      "goods": '. $goods .'
}';
//返回handle函數(shù)
$jsons = json_encode($json);
echo $callback.'('. $jsons .')';

示例圖：

事件代理的案例

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
</head>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
<body>
    <script>
       var ul = document.querySelector("ul");
       ul.addEventListener("click",function(ev)
       {
          var lis = ev.target;
         if(lis.tagName.toLowerCase()=='li')
         {
            lis.style.background="red";
         }
       });
       ul.addEventListener("mouseout",function(ev)
       {
               ev.target.style.background = "";
       });
    </script>
</body>
</html>