zoukankan      html  css  js  c++  java
  • 前端交互,前端与php后台 Ajax 进行数据交互的三种数据形式(3)-json

    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>
            window.onload = function (ev) {
                // 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.发送Aajx请求到服务器
                    ajax({
                        type:"get",
                        url:"10-ajax-test.php",
                        data:{"name":this.getAttribute("name")},
                        timeout: 3000,
                        success: function (xhr) {
                            console.log(xhr);
                            var name = self.getAttribute("name");
                            var str = xhr.responseText;

                     /*JSON.parse()

                                     JSON 通常用于与服务端交换数据。

                                     在接收服务器数据时一般是字符串。

                                     我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。*/

    var obj = JSON.parse(str);
                            // console.log(obj);
                            var subObj = obj[name];
                            // console.log(subObj);
                            oTitle.innerHTML = subObj.title;
                            oDes.innerHTML = subObj.des;
                            oImg.setAttribute("src", subObj.image);
                        },
                        error: function (xhr) {
                            alert(xhr.status);
                        }
                    });
                }
                oBtns[1].onclick = function () {
    
                }
                oBtns[2].onclick = function () {
    
                }
            }
        </script>

    php:

    <?php
    
    echo file_get_contents("10-ajax-test.txt");

    json.text 数据格式

    {
        "nz":{
            "title":"甜美|女装",
            "des":"人见人爱,花间花开,甜美系列",
            "image":"images/1.jpg"
        },
        "bb":{
            "title":"奢华驴包",
            "des":"送女友,送情人,送学妹,一送一个准系列",
            "image":"images/2.jpg"
        },
        "tx":{
            "title":"键盘拖鞋",
            "des":"程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有",
            "image":"images/3.jpg"
        }
    }
  • 相关阅读:
    LeetCode "Palindrome Partition II"
    LeetCode "Longest Substring Without Repeating Characters"
    LeetCode "Wildcard Matching"
    LeetCode "Best Time to Buy and Sell Stock II"
    LeetCodeEPI "Best Time to Buy and Sell Stock"
    LeetCode "Substring with Concatenation of All Words"
    LeetCode "Word Break II"
    LeetCode "Word Break"
    Some thoughts..
    LeetCode "Longest Valid Parentheses"
  • 原文地址:https://www.cnblogs.com/xiaobaicai123/p/10449569.html
Copyright © 2011-2022 走看看