【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开

目录跳转

    • 事件起因:
    • 原因:
    • 更改后的前后端请求接口(解决办法):
    • 事后总结

事件起因:

在一个实时查询的接口中,也就是一旦有输入立马把输入内容发送给后端进行一次查询,然后根据查询的结果生成智能推荐的下拉菜单,也就是下面这样的效果(正常情况下是这样的):【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第1张图片
有输入数据时network的状况(改正后):
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第2张图片
但是之前出现的问题就是当这个输入框输入特殊字符时就会出现如下的报网络断开的错误:
报错
如下图所示,请求也报红了:
在这里插入图片描述

原因:

之前的请求方式为get方式,请求输入内容会直接被加在路由里,当特殊字符输入进来时,会被识别为路由的结束标志或路由中的特殊意义:

如下图特殊字符再url中的意义(当输入26键 键盘上tab上面的 ‘`’ 符号时,会被识别为url直接结束(或者说是无法转义识别)): (当然下图把url中部分特殊符号的url编码给出了 你也可以在前端转换了后在写入路由中,但有些转不了 比如说:前面提到的键盘esc下面的飘号)
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第3张图片
在前端的请求内容,可以看到是get请求的方式:
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第4张图片
后端接收的接口:
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第5张图片

更改后的前后端请求接口(解决办法):

前端(更改为post请求):
不管什么特殊字符都作为houseName键值对的一个字符串值传输到后端去进行模糊查询
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第6张图片
后端(更改为对应的post请求):
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第7张图片
实体houseVo的内容(post请求使用对象接收信息):
【debug】elementui输入框输入特殊字符查询 查询失败 报错:网络断开_第8张图片

事后总结

其实找出原因来后,也是一个挺简单的问题,但在编程中总是会遇到各种奇奇怪怪的问题,特此记录一下

你可能感兴趣的:(IT成长笔记,大杂烩,网络,elementui,前端,java)