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

    (特感谢李南江老师提供视频教学)

    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 res = xhr.responseXML;
                            var title = res.querySelector(name+">title").innerHTML;
                            var des = res.querySelector(name+">des").innerHTML;
                            var image = res.querySelector(name+">image").innerHTML;
                            oTitle.innerHTML = title;
                            oDes.innerHTML = des;
                            oImg.setAttribute("src", image);
                        },
                        error: function (xhr) {
                            alert(xhr.status);
                        }
                    });
                }
                oBtns[1].onclick = function () {
    
                }
                oBtns[2].onclick = function () {
    
                }
            }
        </script>

    php代码获取格式:

    <?php
    //获取xml格式需添加这条
    header("content-type:text/xml; charset=utf-8"); echo file_get_contents("10-ajax-test.xml");

    xml 格式:

    <?xml version="1.0" encoding="UTF-8" ?>
    <products>
        <nz>
            <title>甜美|女装</title>
            <des>人见人爱,花间花开,甜美系列</des>
            <image>images/1.jpg</image>
        </nz>
        <bb>
            <title>奢华驴包</title>
            <des>送女友,送情人,送学妹,一送一个准系列</des>
            <image>images/2.jpg</image>
        </bb>
        <tx>
            <title>键盘拖鞋</title>
            <des>程序员专属拖鞋, 屌丝气息浓郁, 你值得拥有</des>
            <image>images/3.jpg</image>
        </tx>
    </products>
  • 相关阅读:
    day38 20-Spring与Junit整合
    day38 19-Spring整合web开发
    day38 18-Spring的XML和注解的结合使用
    day38 17-Spring的Bean的属性注入:注解方式
    day38 16-Spring的Bean的装配:注解的方式
    day38 15-Spring的配置文件引入的问题
    day38 14-Spring的Bean的属性的注入:集合属性的注入
    day38 13-Spring的Bean的属性的注入:SpEL注入
    day38 12-Spring的Bean的属性的注入:名称空间p
    SqlServer与.NET的数据类型映射关系图
  • 原文地址:https://www.cnblogs.com/xiaobaicai123/p/10449547.html
Copyright © 2011-2022 走看看