springboot jQuery Ajax success 不起作用(not working)

el/2024/2/25 23:07:09

就这一个小问题,一直困扰了我将近12个小时,找了很多教程,都没有成功,无奈啊。

前端代码

$("#addCategory").click(function (){let cate_data = {"categoryName": $("#categoryName").val()}$.ajax({type: "post",url: "/cms/category/addCate",data: JSON.stringify(cate_data),contentType : "application/json;charset=UTF-8",dataType: "text",success: function (res){alert(res);},error: function (res) {alert(res);}})
})

常见的解决问题

  1. data参数有问题
  2. contentType类型有问题
  3. dataType类型有问题

我的代码没有通过上面的方式解决,对于上述三种问题,以后有机会了专门开一篇,说说。
那问题出现在了哪里呢?

解决方案

首先不得不承认,自己的技术实在是有点菜,对于前端的很多知识都不了解,才出现了这种令人哭笑不得的低级bug。

出现问题的代码

<form class="row g-3"><div class="col-auto"><input type="text" id="categoryName" name="categoryName" class="form-control"></div><div class="col-auto"><button id="addCategory" class="btn btn-primary mb-3">添加</button></div>
</form>

这里有个关键性的问题就是,form表单所导致的,虽然form表单里面没有了type=“submit”的提交按钮,但是点击form表单里面的button,但是依然会触发某些事件,虽然还不知道是什么事件,但是就是这个事件导致了success没有成功。这一启发来源于下面的教程:
https://mkyong.com/spring-boot/spring-boot-ajax-example/
在这里插入图片描述

解决思路

1、如上面的教程所示,阻止该事件的触发;
2、将外层的form壳子给剥掉,使用div代替,再辅以相应的css代码依然可以保持前端的样式不变

本文使用的就是第二种方案,并配以bootstrap框架,将form修改成div,样式依旧。


http://www.ngui.cc/el/3458407.html

相关文章

怎么去除(remove) TinyMce Editor 外层的(包裹的)html head body 标签(tag)

解决方法 移除&#xff08;remove&#xff09;插件里的fullpage插件&#xff08;plugin&#xff09; 可能产生的次生性问题 is not focusable 移除required参数

Ubuntu16.04下安装CUDA9.0以及对应版本的CUDNN

1、安装英伟达显卡驱动&#xff08;本人的为GeForce GTX960M&#xff09; 参考&#xff1a;https://blog.csdn.net/ghw15221836342/article/details/79571559 注意其中显卡的版本号&#xff0c;不要盲目安装&#xff08;本人亲测有效&#xff09; 2、GCC的安装 参见&#xf…

Linux下常用命令(根据自己以经使用到的更新)

sudo dpkg -i package.deb 安装deb包exit 退出shelllocale 查看本机语言设置cat /etc/issue 查看ubuntu 内核版本号uname -a/-r unix namewho …

Markdown01

Markdown入门 二级标题 三级标题 四级标题 字体样式 hellow world! hellow world! hellow world! hellow world! 引用 Automation 图片 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9oLUnOY0-1626488925937)(E:\自动化1602 石功林\148548…

大话数据结构之图-邻接矩阵DFS(C++)

大话数据结构 Unit6 图 1. 邻接矩阵的构建和深度遍历 代码 //无向表权值为一#include <iostream> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define INFINITY 65535 using namespace std; int visited[100];//构建顶点表 typedef stru…

大话数据结构之图-邻接表DFS(C++)

大话数据结构 Unit6 图 2.邻接表的构建和深度遍历 代码 #include <iostream> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define INFINITY 65535 using namespace std; int visited[100];//边表结点 typedef struct EdgeNode {int adjvex;…

大话数据结构之图-邻接矩阵BFS(C++)

大话数据结构 Unit6 图 1. 邻接矩阵的构建和广度遍历 代码 //无向表权值为一#include <iostream> #include <algorithm> #include <queue> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define INFINITY 65535 using namespace …

大话数据结构之图-邻接表BFS(C++)

大话数据结构 Unit6 图 2.邻接表的构建和广度遍历 代码 #include <iostream> #include <queue> #include <algorithm> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define INFINITY 65535 using namespace std; int visited[10…

大话数据结构之图-邻接矩阵最小生成树Prim(C++)

大话数据结构 Unit6 图 关于邻接矩阵的最小生成树PRIM算法 代码 #include <iostream> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define INFINITY 65535 using namespace std; int visited[100];//构建顶点表 typedef struct {VertexType…

大话数据结构之图-邻接矩阵最小生成树Kruskal算法(C++)

大话数据结构 Unit6 图 邻接矩阵的最小生成树Kruskal算法 代码 #include <iostream> typedef char VertexType; typedef int EdgeType; #define MAXVEX 100 #define MAXEDGE 10 #define INFINITY 65535 using namespace std; int visited[100];//构建顶点表 typedef …