本文介绍了如何在WebStorm中通过前端jQuery和后端Spring Boot实现跨域进行增删改查操作。前端使用jQuery发起AJAX请求，获取并显示商品数据；后端配置了数据源连接数据库，并开启跨域支持，提供了增删改查的API接口。
前端：①:控制台初始化一个项目：npm init
一路Enter……
②：下载jquery数据库：npm install jquery --save-dev
③：代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="btn" type="button" value="get Products">
<hr>
<div id="products"></div>
</body>
</html>
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//没有刷新的异步交互，称为ajax
$.ajax({
//路径地址
url : 'http://localhost:8088/mvc01/product' ,
//请求采用方法：get
method : 'get' ,
//这次是否准备传参，如果有，就写上
data : {} ,
//准备接受到的参数类型
dataType : 'json' ,
//如果成功了怎么办
success : function(res) {
$(".loading").remove()
res.forEach(function(data){
var div = $('<div></div>');
div.html(data.pname + " : " + data.price);
$("#products").append(div)
})
},
beforeSend:function(xhr) {
$("<img>").attr("src" , "img/loading.gif").attr('class','loading').appendTo($("body"));
}
最低0.47元/天 解锁文章
扫一扫
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
