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

最新推荐文章于 2024-07-22 15:13:59 发布

北凉冬

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量98

点赞数

分类专栏：新星计划 JavaScript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/118180073

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

提示：
本文为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>

在这里插入图片描述

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery高级学习：前后端分离03——地址栏实现数据交互

提示：本文为JavaScript栏目：jQuery高级学习：前后端分离03——地址栏实现数据交互jQuery高级学习：前后端分离03——地址栏实现数据交互前言地址栏实现数据交互A.HTMLB.HTML前言地址栏实现数据交互A.HTML<body><div id="app"> <div id="detail"> <button type="button" id="min">-</button>
复制链接

扫一扫

专栏目录