jQuery高级学习：前后端分离03——地址栏实现数据交互

最新推荐文章于 2024-10-17 11:45:42 发布

原创最新推荐文章于 2024-10-17 11:45:42 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

JavaScript 同时被 2 个专栏收录

24 篇文章

订阅专栏

新星计划

15 篇文章

订阅专栏

本文介绍了如何使用jQuery实现前后端分离，在A.html中通过按钮操作改变地址栏参数，并在B.html中读取地址栏参数展示数据。用户点击购物车链接，地址栏的count参数会随着商品数量变化，B.html页面则根据该参数显示购买的商品数量。

提示：
本文为JavaScript栏目：jQuery高级学习：前后端分离03——地址栏实现数据交互

前言

地址栏实现数据交互

A.HTML

<body>
<div id="app">
    <div id="detail">
        <button type="button" id="min">-</button>
        <input type="text" value="0" id="count">
        <button type="button" id="plus">+</button>
        <a href="B.html?count=5&id=2">购物车</a>
    </div>
</div>
</body>
<script>
    document.getElementById("plus").onclick=function () {
        let value=parseInt(document.getElementById("count").value);
        value++;
        document.getElementById("count").value=value;
        document.querySelector("a").href="B.html?count="+value;

        // optStroe(value);
    }
    document.getElementById("min").onclick=function () {
        let value=document.getElementById("count").value;
        if (value>0){
            value--;
        }
        document.getElementById("count").value=value;
        document.querySelector("a").href="B.html?count="+value;
    }


</script>

B.HTML

<div id="app">
    <p>您一共购买了<b>0</b>件商品</p>
</div>
</body>
<script>
    window.onload=function (){
        let herf=location.href;
        let query=herf.split("?")[1];
        let count=query.split('=')[1]||0;
        document.querySelector("b").innerText=count;
    }
</script>

在这里插入图片描述