网站建设前台和后台,网站使用特殊字体,做网站服务器和域名,网站后台管理系统栏目位置Java后端开发——Ajax、jQuery和JSON
概述
Ajax全称是Asynchronous Javascript and XML#xff0c;即异步的JavaScript和 XML。Ajax是一种Web应用技术#xff0c;该技术是在JavaScript、DOM、服务器配合下#xff0c;实现浏览器向服务器发送异步请求。
Ajax异步请求方式不…Java后端开发——Ajax、jQuery和JSON
概述
Ajax全称是Asynchronous Javascript and XML即异步的JavaScript和 XML。Ajax是一种Web应用技术该技术是在JavaScript、DOM、服务器配合下实现浏览器向服务器发送异步请求。
Ajax异步请求方式不向服务器发出请求会得到数据后再更新页面通过DOM操作修改页面内容整个过程不会发生页面跳转或刷新操作。 传统请求方式和Ajax异步请求方式区别
Ajax九九乘法口诀表
1.创建页面mul99ajax.html,添加num、button和result标记
h3乘法口诀表/h3
阶数input typetext idnum/
input typebutton value提交 onclickdoAjax()/
div idresult/div2.添加Ajax的JS代码
script typetext/javascript
function doAjax(){var num document.getElementById(num).value;var result document.getElementById(result);var xhr new XMLHttpRequest(); xhr.open(get, /myspringmvc/calAjax?numnum); xhr.send(); xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {result.innerHTML xhr.responseText;}}
}
/script1DOM查找元素num和result标记 var num document.getElementById(num).value;var result document.getElementById(result);2创建XHR对象 var xhr new XMLHttpRequest(); 3发送请求
xhr.open(get, /myspringmvc/calAjax?numnum);
xhr.send(); 4设置回调函数
xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {result.innerHTML xhr.responseText;}}5处理异步数据更新数据到result标记
result.innerHTML xhr.responseText;3.编写后端SpringMVC代码MultableController.java在处理方法上增加注解ResponseBody返回值为内容。
Controller
public class MultableController {RequestMapping(/calAjax)ResponseBody // 返回内容不是JSP页面public String cal(Integer num) {Multable mnew Multable();m.setNum(num);String resultm.print();return result;}
}jQuery实现表格奇偶行颜色不同 1.创建页面jQuery.html,添加表格标记和测试数据 table idtb1theadth stylewidth: 70px;/thth stylewidth: 90px;姓名/thth stylewidth: 90px;性别/thth stylewidth: 200px;暂住地/th/thead!-- 把表格放在thead页眉中 这一行不是数据不改变颜色 --tbodytr idtr1tdinput typeradio idrd/tdtd张三/tdtd男/tdtd四川成都/td/trtr idtr2tdinput typeradio idrd/tdtd李四/tdtd女/tdtd四川绵阳/td/trtr idtr3tdinput typeradio idrd/tdtd王五/tdtd男/tdtd四川南充/td/trtr idtr4tdinput typeradio idrd/tdtd赵六/tdtd男/tdtd四川自贡/td/trtr idtr5tdinput typeradio idrd/tdtd陈勇/tdtd男/tdtd四川德阳/td/trtr idtr6tdinput typeradio idrd/tdtd罗梅/tdtd女/tdtd四川宜宾/td/tr/tbody/table2.设置CSS样式奇偶行颜色不同
3.编写jQuery代码设置奇偶行颜色不同设置click改变颜色
!DOCTYPE html
html
head
meta charsetUTF-8
titleInsert title here/title
/head
style
.even {
background-color: #FFF38F;
}
.odd {
background-color: #FFFFEE;
}
.s {
background-color: #FF6500;
}
/* 选中的样式只能放在后面才能掩盖原来的样式 */
table {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
/stylebody
!-- 引入jquery库 --
script src./js/jquery-3.6.4.min.js typetext/javascript/script
script typetext/javascript
$(function() {
$(tbodytr:odd).addClass(odd);
$(tbodytr:even).addClass(even);
$(tbodytr).click(function() { $(this).addClass(s).siblings().removeClass(s).end().find(:radio).attr(checked, true);
});
});
/scripttable idtb1
thead
th stylewidth: 70px;/th
th stylewidth: 90px;姓名/th
th stylewidth: 90px;性别/th
th stylewidth: 200px;暂住地/th
/thead
!-- 把表格放在thead页眉中 这一行不是数据不改变颜色 --
tbody
tr idtr1
tdinput typeradio idrd/td
td张三/td
td男/td
td四川成都/td
/tr
tr idtr2
tdinput typeradio idrd/td
td李四/td
td女/td
td四川绵阳/td
/tr
tr idtr3
tdinput typeradio idrd/td
td王五/td
td男/td
td四川南充/td
/tr
tr idtr4
tdinput typeradio idrd/td
td赵六/td
td男/td
td四川自贡/td
/tr
tr idtr5
tdinput typeradio idrd/td
td陈勇/td
td男/td
td四川德阳/td
/tr
tr idtr6
tdinput typeradio idrd/td
td罗梅/td
td女/td
td四川宜宾/td
/tr
/tbody
/table/body
/htmljQuery版九九乘法口诀
1.在创建页面mul99jquery.html,添加num、button和result标记
!DOCTYPE html
html
head
meta charsetUTF-8
titleInsert title here/title
/head
body
h3乘法口诀表/h3
阶数input typetext idnum/
input idbtn typebutton value提交/
div idresult/div/body
/html2.添加jQuery的Ajax的JS代码
script srchttps://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js/script
script typetext/javascript
$(document).ready(function(){$(#btn).click(function(){var num$(#num).val();$.ajax({url: /myspringmvc/calAjax?numnum,type: get,success: function(data){$(#result).html(data);}})})
})
/script1在jQuery页面函数中给按钮添加事件代码
$(document).ready(function(){$(#btn).click(function(){var num$(#num).val();$.ajax({url: /myspringmvc/calAjax,type: post,data:{num:num},success: function(data){$(#result).html(data);}})})
}) 2获取num控件的值 var numKaTeX parse error: Expected EOF, got # at position 3: (#̲num).val(); 3….ajax()函数设置url、type和success函数。
$.ajax({url: /myspringmvc/calAjax,type: post,data:{num:num},success: function(data){$(#result).html(data);}3.测试 测试结果 商品类型Ajax加载 1.创建type表并录入测试的商品类型数据
CREATE TABLE type (id int(11) NOT NULL AUTO_INCREMENT,name varchar(45) DEFAULT NULL,PRIMARY KEY (id)
) ENGINEInnoDB AUTO_INCREMENT18 DEFAULT CHARSETutf8mb4;
插入数据
INSERT INTO type VALUES (1, 零食);
INSERT INTO type VALUES (2, 饮料);
INSERT INTO type VALUES (3, 香烟);
INSERT INTO type VALUES (7, 文具);
INSERT INTO type VALUES (8, 猕猴桃);
INSERT INTO type VALUES (10, 蛋糕);
INSERT INTO type VALUES (11, 哈皮);
INSERT INTO type VALUES (12, 芒果);
INSERT INTO type VALUES (15, 果子);
INSERT INTO type VALUES (16, 果子);
INSERT INTO type VALUES (17, 果子);刷新之后如图所示 2.添加Javabean类Type.java 和 Dao类TypeDao.java
package com.javaweb.bean;public class Type {
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name name;
}
}package com.javaweb.controller;import java.sql.SQLException;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.javaweb.bean.Type;
import com.javaweb.dao.TypeDao;Controller
RequestMapping(/type)
public class TypeController {private TypeDao typeDaonew TypeDao();GetMapping(/find)ResponseBodypublic ListType find(){try {return typeDao.find();} catch (SQLException e) {e.printStackTrace();}return null;}
}3.修改good_add.jsp添加jQuery代码渲染类型列表
!DOCTYPE html
html
head
meta charsetUTF-8
titleInsert title here/title
/head
body
script
srchttps://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js/script
script typetext/javascript
$(document).ready(function() {
$.getJSON(/myspringmvc/type/find, function(data) {
var html;
data.forEach(function(type){
htmloption valuetype.idtype.name/option
}) ;
$(#type).append(html);
});
})
/scriptdiv classform-group
label forselect_topic classcol-sm-1 control-label类目/label
div classcol-sm-6
select classform-control idtype nametype_id
/select
/div
/div/body
/html4.预览商品添加表单查看类型列表 5.修改good_edit.jsp添加jQuery代码渲染类型列表选中
% page languagejava contentTypetext/html; charsetUTF-8
pageEncodingUTF-8%
!DOCTYPE html
html
head
meta charsetUTF-8
titleInsert title here/title
link relstylesheet href${pageContext.request.contextPath}/css/bootstrap.css /
/head
body
script
srchttps://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js/script
script typetext/javascript
$(document).ready(function() {
$.getJSON(/myspringmvc/type/find, function(data) {
var typeId${g.type_id}
var html;
data.forEach(function(type){
if(type.idtypeId)
htmloption selectedselected valuetype.idtype.name/option;
else
htmloption valuetype.idtype.name/option;
}) ;
$(#type).append(html);
});
})
/scriptdiv classcontainer-fluid
h3修改商品页面/h3
brbr
form classform-horizontal action${pageContext.request.contextPath}/goods/update methodpost
input typehidden nameid value${g.id }/
div classform-group
label forinput_name classcol-sm-1 control-label名称/label
div classcol-sm-6
input typetext classform-control idinput_name namename value${g.name } requiredrequired
/div
/div
div classform-group
label forinput_name classcol-sm-1 control-label价格/label
div classcol-sm-6
input typetext classform-control idinput_name value${g.price } nameprice
/div
/div
div classform-group
label forinput_name classcol-sm-1 control-label介绍/label
div classcol-sm-6
input typetext classform-control idinput_name value${g.intro } nameintro
/div
/div
div classform-group
label forinput_name classcol-sm-1 control-label库存/label
div classcol-sm-6
input typetext classform-control idinput_name namestock value${g.stock }
/div
/div
div classform-group
label forinput_file classcol-sm-1 control-label封面图片/label
div classcol-sm-6
input typetext namecover idinput_file value${g.cover } requiredrequired推荐尺寸: 500 * 500
/div
/div
div classform-group
label forinput_file classcol-sm-1 control-label详情图片1/label
div classcol-sm-6
input typetext nameimage1 idinput_file value${g.image1 } requiredrequired推荐尺寸: 500 * 500
/div
/div
div classform-group
label forinput_file classcol-sm-1 control-label详情图片2/label
div classcol-sm-6
input typetext nameimage2 idinput_file value${g.image2 } requiredrequired推荐尺寸: 500 * 500
/div
/div
div classform-group
label forselect_topic classcol-sm-1 control-label类目/label
div classcol-sm-6
select classform-control idtype nametype_id
/select
/div
/divdiv classform-group
div classcol-sm-offset-1 col-sm-10
button typesubmit classbtn btn-success提交保存/button
/div
/div
/form
/div
/body
/html6.预览商品编辑表单查看类型列表及选中
上面项目已打包上传到网盘需要可以自取。附链接https://pan.baidu.com/s/1HmVI00L_C7Zx3bqTEqzXnA?pwd2024
后面有时间和精力也会分享更多关于大数据领域方面的优质内容感谢各位的喜欢与支持
