本文介绍了一个使用jQuery实现的网络请求案例，包括向接口发送请求以渲染页面数据，以及实现增删改查功能。重点讲解了jQuery的setItem()、ajaxSetup()、trigger()和forEach()等方法的应用，以及如何处理模态框中的网络请求和事件绑定。
1. 案例需求
向接口发送网络请求，将数据渲染在页面上，并实现对应的增删改查功能
2. 需要用到的jQuery静态方法：
Storage setItem() 方法
setItem() 方法设置指定存储对象项的值。
setItem() 方法属于 Storage 对象，它可以是 localStorage 对象，也可以是 sessionStorage 对象。(本案例中我们仅用sessionStorage对象就可以)
sessionStorage 对象仅存储一个会话的数据（关闭浏览器选项卡时数据将被删除）。
用法：
向 sessionStorage 中保存数据的语法： sessionStorage.setItem(“key”, “value”);
从 sessionStorage 中读取数据的语法：var lastname = sessionStorage.getItem(“key”);
ajaxSetup() 方法
为所有ajax设置默认值
语法：$.ajaxSetup({name:value, name:value, … })
trigger() 方法
trigger() 方法触发被选元素的指定事件类型。
语法：$(selector).trigger(eventObj)
eventObj,规定事件发生时运行的函数。
forEach()方法
对数组的每个元素执行一次给定的函数
语法：arr.forEach(callback(currentValue, index, array)，thisArg)
callback，为数组中每个元素执行的函数，该函数接收一至三个参数
currentValue ，数组中正在处理的当前元素。
index （可选），数组中正在处理的当前元素的索引。
array （可选），forEach() 方法正在操作的数组。
thisArg （可选）参数，当执行回调函数 callback 时，用作 this 的值。
3. 代码搭建
3.1 案例思路
几乎所有事件都要发送网络请求，网络请求的数据格式或请求头均由接口决定。本案例的难点在于模态框的网络请求。由于修改按钮和新增按钮共用一个模态框，所以可以共用一个网络请求。唯一不同的是新增按钮不需要传送产品的id，而修改按钮在发送网络请求时需要传送产品的id。因此在模态框的确定按钮中，我们需要判断是发送哪种请求。
3.2 页面结构
先搭建好页面结构
<style>
/* 初始化table样式 */
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: center;
line-height: 30px;
width: 1200px;
margin-top: 10px;
}
/* 初始化模态框遮罩样式 */
.dialog {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
line-height: 40px;
/* 隐藏模态框 */
display: none;
}
/* 初始化模态框样式 */
.dialog .container {
font-size: 18px;
width: 60%;
height: 400px;
margin: calc((100vh - 400px)/2) auto;
background-color: #fff;
}
.dialog .container .dialog_header {
background-color: bisque;
}
.dialog .container .dialog_footer button {
position: relative;
left: 350px;
display: inline-block;
width: 50px;
background-color: bisque;
}
</style>
<body>
<button id="login">登录</button>
<button id="load">加载数据</button>
<input type="text">
<select name="status" id="">
<option value="正常">正常</option>
<option value="下架">下架</option>
</select>
<button id="toSearch">查询</button>
<button id="toAdd">新增</button>
<!-- 表格展示数据 -->
<table>
<thead>
<tr>
<th>序号</th>
<th>产品编号</th>
<th>名称</th>
<th>价格</th>
<th>状态</th>
<th>所属栏目</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格内容通过发送网络请求渲染出来 -->
</tbody>
</table>
<!-- 模态框 默认不显示 -->
<div class="dialog">
<div class="container">
<div class="dialog_header">
新增产品信息
</div>
<div class="dialog_center">
<div>
产品名称: <input type="text" name="name">
</div>
<div>
状态: 正常<input type="radio" name="status" value="正常">
下架<input type="radio" name="status" value="下架">
</div>
<div>
价格: <input type="text" name="price" id="">
</div>
<div>
产品描述: <textarea name="description" cols="30" rows="10"></textarea>
</div>
</div>
<div class="dialog_footer">
<button class="cancel">取消</button>
<button class="submit">确定</button>
</div>
</div>
</div>
</body>
未渲染的页面效果：
3.3 局部jq代码
在script标签中需要引进jquery和Qs组件库
//引入本地jq
<script src="./jquery-3.6.0.js"></script>
//引入在线Qs
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></sc
最低0.47元/天 解锁文章
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
