分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

SSM用jq整合Ajax入门案例讲解

发布时间:2023-09-06 02:17责任编辑:顾先生关键词:Ajax入门案例

SSM用Jq整合Ajax

我就是一个程序小白,很多原理都不懂,下面的内容只能让新手知道怎么用。

Ajax

废话少说,总之像点赞,评论,之类的很多功能没必要进行页面跳转,SSM框架用表单或者超链接的方式提交给Controller层都必须页面跳转,用Ajax其实和表单提交之类的没区别,只是不用跳转。

比如你想实现一个简单点赞增加功能,同时数据库保存信息

jsp代码

<span id="sp1">用户1</span><br/>

<button id="bt1">点赞</button><span id="sp2">0</span>

也就是点一下赞,赞的数量+1,数据库里用户1的点赞数量也+1

Jq代码

在<head>标签里引入jq,如果你的SSM里面有jq就按照引用js那样,如果没有,你就用我下面的代码

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>  //这样引入jq电脑需要联网

下面是jq代码(不懂不要紧,就是这样用,复制粘贴罢了)

<script type="text/javascript">
$(function () {

var user=$("#sp1").text();//获取点赞对象:用户1

var sum=$("#sp2").text()//获取当前赞的数量,这里获取的是字符串
???????$("#bt1").click(function () {//给button设置点击事件
???????????$.ajax({
???????????????url: "addZan", ???????//这个对应Controller的URL,和你们以前表单里面的action一样
???????????????data: { //data就是你想要传什么数据到Controller层,这里的数据是json数据。

   usera:user//多个数据用逗号隔开,usera其实相当于form里的name属性,这个名字和Controller层传过去的值对应

                    //user就是刚刚获取到的值,相当于把user赋值给usera

                    //其实这行代码可以写成 usera:$("#sp1").text()

???????????????},
???????????????type: "POST", ??????????????????//类型,POST或者GET,就和表单与超链接一样
???????????????dataType: ‘text‘, ?????????????//Controller层返回类型,如果返回String,就用text,返回json,就用json
???????????????success: function (data) { ?????//成功,回调函数

???????????????????alter(data.result);//可以用data调用Controller返回的值

$("#sp2").html(parseInt(sum)+1;);//点赞+1,先把sum强转为整再+1
???????????????},
???????????????error: function () { ?????????//失败,回调函数
alter("程序出错。。。");
???????????????}
???????????});
???????})

???})
</script>

Controller层

@RequestMapping("/addZan")//对应jq里面的url
@ResponseBody//需要传值就用这个注解
public String addZan(@RequestParam("usera") String usera)  {//usera就是jq传进来的参数

//操作数据库,调用Sevice层,和SSM一模一样

String result="点赞成功";

retrun result;

}

SSM用jq整合Ajax入门案例讲解

原文地址:https://www.cnblogs.com/fangyunchen/p/9773594.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved