本地数据正反查询的实现例子

最新推荐文章于 2021-07-19 20:09:17 发布

Dear_Mr

最新推荐文章于 2021-07-19 20:09:17 发布

阅读量1.9k

点赞数 1

分类专栏： JavaScript 文章标签： url 本地数据正反查询交互

本文链接：https://blog.csdn.net/Dear_Mr/article/details/69664060

版权

本文介绍了如何实现本地数据的正反查询，以减少与服务器交互，提高用户体验。以市县级选择为例，用户选择的县级ID会被添加到URL上，通过URL中的cityID查询并显示对应市县。即使页面刷新，仍能保持之前的选择，提高效率。文章包含相关代码示例。

摘要由CSDN通过智能技术生成

本地数据正反查询的实现例子

通过本地数据的查询可以减少与服务器交互的次数，提高效率，使得交互更优

这里是用市县级为例的，主要的思想就是需要需要交互的数据不是通过后台查询数据库进行交互，而是通过本地的数据与用户进行交互，当用户选择完县级的时候，会将县级的ID号添加到URL上，而对于带有cityID的URL会进行一定的处理，根据ID查找对应的县和市并且显示在界面上，这种情况之下，就算用户重新刷新了，也会呈现之前的选择（此处与向后台请求相比，效率也高），当然不是所有的数据都适合，应该区别对待

index.html

这里没有用select，而是采用了一个ul，主要想法是市县的选择都可以通过这个ul完成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="wrapper">
    <ul id="cityChoose">

    </ul>
    <div class="c-choose" id="cityClick" name="s_city">市</div>
    <div class="c-choose" id="countryClick" name="s_country">县</div>
</div>

<script type="text/javascript" src="./area.js"></script>
<script type="text/javascript" src="./index.js"