网站建设 外文文献,辽宁模板网站建设公司,wordpress的PC端和移动端,福建西南建设有限公司网站一、Ajax1.1 什么是AjaxAJAX Asynchronous JavaScript and XML(异步的JavaScript和XML)。Ajax是一种在无需加载整个网页的情况下#xff0c;能够更新部分网页的技术#xff0c;它不是一种新的编程语言#xff0c;而是一种用于创建更好更快以及交互性更强的Web应用程序的技术…一、Ajax1.1 什么是AjaxAJAX Asynchronous JavaScript and XML(异步的JavaScript和XML)。Ajax是一种在无需加载整个网页的情况下能够更新部分网页的技术它不是一种新的编程语言而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。例如在搜索框输入字符的时候提醒框实时更新但是页面地址没变这就是Ajax的功劳。没有使用ajax技术的网站想要更新内容或者提交一个表单都需要重新加载整个页面使用了ajax技术的网页通过在后台服务器进行的少量的数据交换就可以实现异步局部更新。1.2 利用ajax可以做什么注册时输入用户名自动检测用户是否已经存在登录时提醒用户名密码错误删除数据行时将行ID发送到后台后台在数据库中删除数据库删除成功后在页面DOM中将数据行也删除。1.3 jQuery 实现Ajax先不考虑纯JS实现Ajax的方法这里直接使用jquery提供的更方便学习避免重复造轮子可以去了解下本质XMLHttpRequest !也没有展示用iframe标签伪造ajax的方法有兴趣的话可以参考狂神原课程视频。Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把这些外部数据直接载入网页的被选元素中。jQuery不是生产者而是大自然搬运工。jQuery Ajax本质就是XMLHttpRequest对他进行了封装方便调用!1.3.1 jquery的安装和使用jquery的安装和使用和基础知识见另一篇笔记jQuery学习笔记_爱学习的小船的博客-CSDN博客1.3.2 jQuery Ajax 的核心方法jQuery.get() 方法的主要参数如下jQuery.get(…) 主要参数:· url: 待载入页面的url地址· data: 待发送的 key/value 参数· success: 载入成功时回调函数· dataType: 返回内容格式xml, json, script, text, htmljQuery.ajax() 方法类似最常用的参数 仍是 url data successjQuery.ajax(…) 主要参数:· url: 待载入页面的url地址· data: 待发送的 key/value 参数· success: 载入成功时回调函数· error失败之后执行的回调函数(全局)· type请求方式GET、POST1.9.0之后用method 类似的还有 jQuery.post()1.3.3 简单版 (前端数据--后端--success)使用最原始的HttpServletResponse处理这是最原始的HttpServletResponse处理,最简单也最通用, 主要实现的效果: 前端表单里的数据data,传给后端进行处理,后端返回再返回简单的true或false这里省略了一下关于web.xml 和 springmvc的配置,主要体验一下ajax编写一个controller方法:Controller
public class AjaxController {RequestMapping(/a1)public void ajax1(String name , HttpServletResponse response) throws IOException {//if (admin.equals(name)){response.getWriter().print(true);}else{response.getWriter().print(false);}}
}导入jquery,可以用在线的CDN,也可以下载导入,方法见jquery的笔记,这里是用绝对地址导入:script srchttps://code.jquery.com/jquery-3.1.1.min.js/script
script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptindex.jsp代码% page contentTypetext/html;charsetUTF-8 languagejava %
htmlheadtitle$Title$/title%--script srchttps://code.jquery.com/jquery-3.1.1.min.js/script--%script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/scriptscriptfunction a1(){$.post({url:${pageContext.request.contextPath}/a1,data:{name:$(#txtName).val()},success:function (data,status) {alert(data);alert(status);}});}/script/headbody%--onblur失去焦点触发事件--%用户名:input typetext idtxtName onblura1()//body
/html实现的过程如下图所示,需要对应的名称也在图中标出来了1.3.4 升级版(前端事件--后端--数据给前端展示)使用ResponseController注解,处理后端返回)结合学习的json, 使用ResponseController注解来处理后端返回给前端的数据,可以自动转为json格式, 主要实现的效果: 前端的事件(例如button的点击)--触发相应的function--找到后端对应的controller进行处理, 后端返回再返回数据--前端接收这些数据,处理后再进行显示.User实体类//需要提前下载lombok插件
Data //自动生成getset方法
AllArgsConstructor //自动生成有参构造
NoArgsConstructor //自动生成无参构造
public class User {private String name;private int age;private String sex;
}controller层的处理函数RequestMapping(/a2)
ResponseBody
public ListUser ajax2(){ListUser list new ArrayListUser();list.add(new User(Boat,2,女));list.add(new User(Jack,3,男));list.add(new User(Rose,4,女));return list; //由于ResponseBody注解将list转成json格式返回
}前端页面% page contentTypetext/html;charsetUTF-8 languagejava %
html
headmeta charsetUTF-8titleTitle/title
/head
body
input typebutton idbtn value获取数据/
table width80% aligncentertrtd姓名/tdtd年龄/tdtd性别/td/trtbody idcontent/tbody
/table
script src${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js/script
script$(function () {$(#btn).click(function () {$.post(${pageContext.request.contextPath}/a2,function (data) {console.log(data)var html;for (var i 0; i data.length ; i) {html tr td data[i].name /td td data[i].age /td td data[i].sex /td /tr}$(#content).html(html);});})})
/script
/body
/html处理的过程如下图所示:效果如下图所示1.3.5 至尊版(前端发送数据--后端处理,并发送数据--前端接收并展示) (实现注册的提示效果)主要过程:前端将输入框里的数据发给后端,后端将结果给前端,前端进行展示Controller层RequestMapping(/a3)
public String ajax3(String name,String pwd){String msg ;//模拟数据库中存在数据if (name!null){if (admin.equals(name)){msg OK;}else {msg 用户名输入错误;}}if (pwd!null){if (123456.equals(pwd)){msg OK;}else {msg 密码输入有误;}}return msg; //由于ResponseController注解将msg转成json格式返回
}前端页面!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://code.jquery.com/jquery-3.1.1.min.js/script
/head
body
scriptfunction a1() {$.post({url: /a3,data: {name: $(#name).val()},success: function (data) {if (data.toString() OK) {$(#userInfo).css(color, green);} else {$(#userInfo).css(color, red);}$(#userInfo).html(data);}});}function a2() {$.post({url: $/a3,data: {pwd: $(#pwd).val()},success: function (data) {if (data.toString() OK) {$(#pwdInfo).css(color, green);} else {$(#pwdInfo).css(color, red);}$(#pwdInfo).html(data);}});}/script
/head
body
p用户名:input typetext idname onblura1()/span iduserInfo/span
/p
p密码:input typetext idpwd onblura2()/span idpwdInfo/span
/p
/body/body
/html效果如图:Ajax总结⭐使用jQuery需要导入jQuery使用Vue就导入VUE两个都用自己原生态实现三部曲编写对应处理的Controller返回消息或者字符串或者json格式的数据编写ajax请求urlController请求data 键值对success回调函数给Ajax绑定事件例如点击click失去焦点onblur键盘弹起 keyup课程链接:【狂神说Java】一小时掌握Ajax_哔哩哔哩_bilibili
