网站建设一秒互联wordpress相册设置

当前位置： 首页 > news >正文

网站建设一秒互联,wordpress相册设置,网站做视频,xiu主题做的网站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 后面有时间和精力也会分享更多关于大数据领域方面的优质内容感谢各位的喜欢与支持