day15-ajax和jquery
回顾: 分页:将数据按照页码划分,提高用户的体验度. 分类:逻辑分页:一次性将内容加载到内存(list),获取自己想要的数据 sublist截取.缺点:维护起来麻烦物理分页:(经常使用) 每次只去查询当前页需要的数据 缺点:和数据库交互多 mysql: limit格式:select ..... limit m,n;[m+1,m+n]规律:查看第n也数据: limit (n-1)*pageSize,pageSize 每页中需要的数据:5个当前页内容 list 通过limit查询当前页 currPage 前台传递过来每页显示的条数 pagesize 固定总条数 totalCount count(*)查询总页数 Math.ceil(totalCount*1.0/pageSize) 封装成一个pagebean 在前台展示:1.当前页数据 遍历 pb.list2.展示首页 上一页... 然后给他们添加超链接3.判断是否是第一页 若是:不展示 首页和上一页4.判断是否是最后一页 若是:不展示 尾页和下一页5.将所有的页码展示forEach begin="1" end="${pb.totaoPage}"6.判断是否是当前页若是:则不加超链接若不是:加超链接 /// 案例1-使用原生的ajax判断用户名是否占用(了解) 需求:当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息 技术分析:ajax ajax异步JavaScript和XML,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 / ajax入门程序:步骤:1.创建一个核心对象 XMLHttpRequest2.编写一个回调函数3.编写请求方式和请求的路径(open操作)4.发送请求(send操作) ajax-api详解常用属性:onreadystatechange:检测readyState状态改变的时候readyState:ajax核心对象的状态0:核心对象创建1:调用了open方法2:调用了send方法3:部分响应已经生成(没有意思)4:响应已经完成(使用的是这个状态)status:状态码if(xmlhttp.readyState==4 && xmlhttp.status==200){}responseText:响应回来的文本常用方法:open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径send(["参数"]):发送请求 参数是请求方式为post的时候的参数setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型 必须放在send方法之前. / 步骤分析:1.数据库和表CREATE TABLE `user` (`id` INT(11) NOT NULL AUTO_INCREMENT,`username` VARCHAR(20) DEFAULT NULL,`password` VARCHAR(20) DEFAULT NULL,`email` VARCHAR(20) DEFAULT NULL,`name` VARCHAR(20) DEFAULT NULL,`sex` VARCHAR(10) DEFAULT NULL,`birthday` DATE DEFAULT NULL,`hobby` VARCHAR(50) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');2.新建项目导入 jar包 工具类 配置文件3.新建一个注册页面 表单 在用户名文本框上输入用户名 失去焦点发送ajax请求,将输入的值发送到servlet4.checkUsername4Ajax接受用户名调用service完成查询操作 返回一个用户判断user是否为空若为空 :写1 代表可以使用若不为空:写05.在表单接受响应的数据判断一下,若为0,则提示用户名已被占用 表单不可用提交 提交按钮禁用document.getElementById("sub").disabled=true; // 案例2-使用jquery的ajax判断用户是否被占用 技术分析:jquery中的ajax /// 四种:了解:jquery对象.load(url,params,function(数据){});★: $.get(url,params,function(数据){},type);发送get请求的ajaxurl:请求的路径params:请求的参数 参数为key\value的形式 key=value {"":"","":""}fn:回调函数 参数就是服务器发送回来的数据type:返回内容格式,xml, html, script, json, text, _default。 以后用"json"★: $.post(url,params,function(数据){},type);发送post请求的ajax若结果为json格式, 打印返回值的时候是一个对象 例如若json为 {"result":"success","msg":"成功"}获取msg 只需要 参数.msg理解:$.ajax([选项]);选项的可选值:url:请求路径type:请求方法data:发送到服务器的数据success:fn 成功以后的回调error:fn 异常之后的回调dataType:返回内容格式 经常使用jsonasync:设置是否是异步请求例如:$.ajax({url:"/day15/demo1",type:"post",data:"username=tom",success:function(d){alert(d.msg);},error:function(){},dataType:"json"});// 步骤分析:将js原生ajax修改成jquery的ajax 案例3-模仿百度搜索 需求:在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示 步骤分析:1.表create table keyword(id int primary key auto_increment,kw varchar(20));2.页面3.在文本框输入内容 keyup的时候 发送ajax请求 将输入值传递到后台4.将返回的数据展示 /// 案例4-省市联动 需求:先有一个省份的下拉选,根据选择省份,从而动态的市下拉选中加载所有的市. 步骤分析:1.表2.页面上有两个下拉选 省份的下拉选一般是固定的 页面加载的时候读取所有的省份3.当省份改变的时候,获取省份的信息,发送一个ajax请求,去市的表中查询相应省份的所有市,然后将他们加载到市下拉选上4.selectProServlet selectCityServlet// 技术分析:jsonJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。json格式:格式1:value可以为任意值{"key":value,"key1":value1}格式2:e可以为任意值[e1,e2]jsonlib工具类,可以使对象转换成json数据1.导入jar包2.使用apiJSONArray.fromObject(对象) 数组和list JSONObject.fromObject(对象) bean和map / / 上午回顾: 原生ajax:1.获取核心对象 XMLHttpRequest2.编写回调函数xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){alert(xmlhttp.responseText);}}3.open操作 设置访问的方式和路径xmlhttp.open("get","url");4.send操作xmlhttp.send("post的参数")若有参数需要设置一个头xmlhttp.setRequestHeader("content-type","form表单enctype属性") jquery中ajax掌握的:$.get(url,params,fn,type);type:"json"$.post(url,params,fn,type);理解:$.ajax(选项);选项:url:type:data:success:fnerror:dataType:"json" json:轻量级的数据格式格式1:{"key":value,"key1":value}格式2:[e1,e2] jsonlib:1.导入jar包2.使用apiJSONArray.formObject(数组或者list);JSONObject.formObject(bean或者map);// 获取jquery对象:$("选择器") jQuery("选择器"); jquery对象>>dom对象方式1:jquery对象.get(index);方式2:jquery对象[index] dom对象>>jquery对象$(dom对象)页面载入$(function(){})派发事件jquery对象.事件(function(){...});选择器:#id值 .class值 标签名 [属性] [属性='值']a b:后代 a>b:孩子 a+b:大弟弟 a~b:所有弟弟:first :last :odd :even :eq|gt|lt(index):hidden:checked :selected 属性和css:prop|attrcss文本 标签体val()html() text()文档处理内部插入append prepend 外部插入after before删除remove 效果:隐藏|显示show() hide()淡入淡出fadeIn() fadeOut()滑入滑出slideDown() slideUp()遍历jquery对象.each(function(){});
转载于:https://www.cnblogs.com/chenyanlong/p/9998717.html
day15-ajax和jquery相关推荐
- php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
- $.ajax data怎么处理_不会吧,不会吧,不愧是Ajax,jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
- AJAX(三)jQuery AJAX.post
在jQuery 中也提供了一个比较简单的ajax请求jQuery.post(url, [data], [callback], [type]),如果考虑出错时执行函数该方法不适合,请选择ajax 相对j ...
- jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)
使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX) 我正在尝试编写一个JQuery自动完成脚本,它将通过AJAX调用url并在用户将数据输入表单时更新自 ...
- Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
- 第一章:AJAX与jQuery
AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- Promise 的基本使用 与 Ajax的jQuery封装
Promise 的基本使用 为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参 ...
- AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局 转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
- Spring MVC:Ajax和JQuery
今天,我想演示如何将AJAX集成到Spring MVC应用程序中. 我将在客户端使用JQuery来发送请求和接收响应. 本教程将基于我以前关于Spring MVC和REST服务的教程之一. 在本文中, ...
最新文章
- Linux软件安装管理---源码安装
- mysql语句orderby_mysql中的orderby_MySQL
- SUN JAVA面试笔试题
- mysql session 数_查询数据库当前连接数(session),进程数等操作
- emc re 整改 超标_老刘工程师睡前故事5-EMC 辐射发射超标怎么办?
- git rebase基础
- 前端-requests-flask对应关系 HTTPTokenAuth
- 如何使用QoS管理分配存储IOPS?
- surf中,颜色描述第四维
- junit 生成html报告,gradle – 如何为JUnit 5测试创建HTML报告?
- 电脑桌面录屏软件大全,给大家推荐一波优秀的屏幕录像工具!
- 解决google浏览器自动播放问题,亲测可用!!
- android nat64,dpvs学习笔记: 18 nat64 的实现
- Lighting build failed. Swarm failed to kick off UE4光照构建失败
- 连接公司办公 快速连接公司协同办公的20款必备软件
- ctypes 指针类型 byref pointer POINTER
- input输入密码的时候调用纯数字键盘和加密,js弹出键盘
- Vue中minxis的使用
- 搜狗浏览器与IE9评测比较
- 华为鸿蒙2.0 pc,华为鸿蒙工具下载-华为鸿蒙v2.0正式电脑下载 - 91单机网
热门文章
- graph driver-device mapper-04libdevmapper基本操作
- 几种流行Webservice控制框架
- 关于salt MD5
- [蛋蛋の插画]小笔“最高”>、<
- hadoop+hive+flink+hbase交互的版本兼容性
- iamond operator is not supported in -source 1.5
- mysql的事务操作
- html放缩都让内容处于正中间
- Django的静态文件路径设置对比
- win7中PowerShell终端打开时自动进入python virtualenv的虚拟环境以及一键切换python版本