Web项目实战 | 购物系统v2.0 | 开发记录（八）前后端分离初步思路 | JS处理URL参数实用函数 | AJAX 向后台传递Map类型数据 | MyBatis多表查询优化

" 常在河边走，哪能不湿鞋。" ——若发现文章内容有误，敬请指正，望不吝赐教，感谢!

文章目录

• 以往记录
• 一、使用JQuery设计工具函数处理URL
• • 功能一：直接获取替换参数值后的URL
  • 功能二：清空URL除第一个以外的参数
  • 功能三：封装URL的参数为Map/JSON类型
• 二、JQuery AJAX 通过Map传输数据
• 三、前后端分离思路：动态渲染Ajax请求返回的数据
• 四、两种方式实现筛选查询
• • 思路一：代码限制查询的筛选条件
  • 思路二：通过改写Mapper映射文件实现多表查询+条件限制

以往记录

Web项目实战 | 购物系统v2.0 | 开发记录（一）需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…

Web项目实战 | 购物系统v2.0 | 开发记录（二）搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口

Web项目实战 | 购物系统v2.0 | 开发记录（三）分页显示 | 根据商品名称进行模糊查询

Web项目实战 | 购物系统v2.0 | 开发记录（四）单个页面单个请求解决根据商品类型进行分页查询 | 使用省市区三级联动 | 使用JQuery 插件实现图片上传

Web项目实战 | 购物系统v2.0 | 开发记录（五）| 使用base64编码实现头像修改 | 用户个人信息修改 | JQuery动态提示

Web项目实战 | 购物系统v2.0 | 开发记录（六）商品详情页面 | 游客访问主页 | 运用Bootstrap4轻量级弹窗实现提示

Web项目实战 | 购物系统v2.0 | 开发记录（七）SpringBoot整合Shiro框架进行身份认证 | Shiro 加盐(MD5+Salt)验证登陆 | 数据表结构优化避免外键+设置中间表

一、使用JQuery设计工具函数处理URL

URL的作用非同小可，比如在百度搜索CSDN，观察地址栏可以发现有许多参数。

这些参数可以传输到SpringMVC的Controller层，后期有许多的用途，比如查询一个用户的映射地址为user/query，这时可以给它添加一个参数表示查询的用户信息，比如user/query?id=1，这时则表示查询id为1的用户，笔者通过URL的处理，实现了后台管理系统中用户信息多个条件搜索的功能。

JS实现代码：urlUtil.js

// 添加 或者 修改 url中参数的值
function clearURIExceptPageNow(){return document.location.href.split('&')[0]
}function getUrlParam(thisURL, name) {let array = new RegExp(name + '=([^&]*)').exec(thisURL);return (array == null || array.length < 1)? '' : decodeURI(array[1]);
}function updateUrlParam(thisURL, name, val) {thisURL = decodeURI(thisURL)// 如果 url中包含这个参数 则修改if (thisURL.indexOf(name+'=') > 0) {var v = getUrlParam(thisURL, name);if (v != null) {// 是否包含参数thisURL = thisURL.replace(name + '=' + v, name + '=' + val);}else {thisURL = thisURL.replace(name + '=', name + '=' + val);}} // 不包含这个参数 则添加else {if (thisURL.indexOf("?") > 0) {thisURL = thisURL + "&" + name + "=" + val;}else {thisURL = thisURL + "?" + name + "=" + val;}}return thisURL;
}
function updateCurrentUrlParam(name, val) {return updateUrlParam(document.location.href, name, val)
}
function getUrlParamToMap() {const params = window.location.toString().split('\?')[1]let map = new Map();if(params == null || params === '') return ''params.split('&').forEach(param =>{let kv = param.split('=');let k = kv[0]let v = kv[1]map.set(k,v)})return map
}
function getUrlParamToJSON() {let obj= Object.create(null)let map = getUrlParamToMap();if(map == null || map === '') return;for (let[k,v] of map) {k = decodeURI(k)v = decodeURI(v)obj[k] = v;}return JSON.stringify(obj)
}

功能一：直接获取替换参数值后的URL

比如当前地址栏的URL为：

user/query?id=1&roleName=普通用户

此时将查询用户ID为1，身份是普通用户的所有用户，当要切换查询的用户身份时，可以通过这个函数直接获取对应的URL

updateCurrentUrlParam('roleName', '管理员')

那么URL就会变成以下内容（其他的参数不会受影响）

user/query?id=1&roleName=管理员

功能二：清空URL除第一个以外的参数

比如当前地址栏请求的URL为：

user/query?pageNow=1&username=尤你&roleName=管理员

由于笔者固定第一个参数表示页数（分页查询），所以这里第一个参数不能清除，在clearURIExceptPageNow() 函数里保留了第一个参数，执行后的结果：

user/query?pageNow=1

功能三：封装URL的参数为Map/JSON类型

之前的函数都是基于URL内容上的修改，本质上都是字符串类型，主要用于修改当前的地址栏信息。

接下来是对其类型的封装，这样有助于通过AJAX请求向后台传递数据，直接将URL的参数传递到后台进行处理。

getUrlParamToJSON() 	// 将当前地址栏的参数值封装成JSON字符串（可传递到后台）getUrlParamToMap()		// 将当前地址栏的参数封装成map类型的对象

二、JQuery AJAX 通过Map传输数据

有了之前的工具函数后，现在操作URL的参数变得特别灵活，以获取用户信息为例：

function loadData(){$.ajax({url: '/admin/user/query',type: 'POST',data: getUrlParamToJSON(),dataType: 'JSON',contentType: 'application/json;charset=UTF-8',error: (err) =>{console.error(err)},success: (data) =>{console.error(data)//...}})
}

Controller层：

package com.uni.controller.admin;import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.uni.base.RestResponse;
import com.uni.pojo.User;
import com.uni.service.UserService;
import com.uni.utils.PageUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.io.UnsupportedEncodingException;
import java.net.

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！