Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

AJAX Mr.Lee 1142℃ 已收录 0评论

Ajax案例-会员模块-curd-作业

功能需求

  1. 在添加的时候做用户名唯一性检查

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 做数据展示做一个无刷新分页(分页插件 layUI 闲心)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 做删除的时候做Ajax无刷新删除 + 事件代理完成、事件委托

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

实操-添加

用户注册-唯一性检验

  1. 编写一个user.html文件,展示一个注册表单

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 在user.html页面编写js代码进行校验用户信息,如果前台校验成功,使用ajax发送网络请求,进行用户唯一性处理

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:这里的swal函数使用的是sweetalert插件提供的。

  1. 在后台编写一个checkUser.php文件完成用户唯一性校验,可以注册返回1,不可以注册返回0

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

用户注册-添加入库

1. 编写一个user.html文件,展示一个注册表单

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 在user.html页面编写js代码进行校验用户信息,如果前台校验成功,使用ajax发送网络请求,进行用户入库操作

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:这里的swal函数使用的是sweetalert插件提供的。

3. 在后台编写一个addkUser.php文件完成用户入库操作,成功返回1,失败返回0

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

sweetalert插件

相关网站:

http://www.bootcdn.cn/sweetalert/

http://mishengqiang.com/sweetalert/

  1. 在bootcdn网站查询sweetalert插件

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 自己的页面引入对应的css和js资源文件,调用 swal 函数进行测试

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

实操-用户展示

用户的展示-无刷新分页

昨天使用了一个叫做layUI提供的一个layPage的分页插件。

功能需求分析:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

代码实现:

  1. 定义一个ulst.php展示用户的列表,默认获取显示第一页的数据

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 定义一个formatDataEs6方法格式化用户信息,返回一个HTML字符串

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 定义一个userList.php页面,接收分页请求,返回数据

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

underscore工具库

简介:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 编写一个HTML文件,引入underscore.js文件,编写js代码,调用该工具库提供的方法

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:_.each() 用于遍历数组 _.uniq() 用于数组去重

2. 效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

实操-用户删除

功能需求:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 在ulst.php为table元素定义一个id属性

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 为该table元素绑定一个点击事件

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 定义一个ajaxDelUser函数,发送ajax请求,删除用户信息

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

事件优化处理机制简介

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

优化处理

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

json简介

①-json是什么?

  1. 什么是json?

答:json是由一个叫做道格拉斯(道叔,josn规范的制定者,一般他是json发现者)发现的一种在多种语言(js\php\java\c\python…)之间进行数据传递的一个文本的数据格式。以前也可以使用XML来组织格式来交换数据,但是XML操作起来非常的麻烦,慢慢的更多的是使用json格式数据做传递。

注意:虽说现在json非常的流行,但不意味着XML没有使用的必要的。在很多的领域XML还是有其独特的优势,尤其是在数据传递格式非常严苛的情况下(DTD:文档约束,主要是可以去约束XML的定义),例如银行的系统。并且可以做小型的数据库、还可以做配置文件(Java里面很多的配置文件都是使用xml)。

注意:json也是可以作为配置文件的,例如composer的包管理器的配置文件。(现在很多的项目都是使用json作为配置文件)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:多种格式的数据都可以作为配置文件

  1. php.ini
  2. httpd.conf
  3. conf.yaml
  4. composer.json
  5. config.xml

面试:json还是XML好?没有什么好或不好,主要是实际的业务需求,以及公司领导的安排。

官网:http://www.json.org.cn/

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

json是啥?

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

网站:http://www.json.org.cn/standard.htm

②-json格式到底是如何定义的?

形如下面的数据结构被称为json格式的文本,需要注意:json格式里面的 key/value对是无序的。和php里面的关联数组比较类型,也和js里面的json字面量对象很像。

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

定义语法:

{

“key”: “value1”, // value值是字符串的时候必须加上双引号,同时 key 必须要加双引号

“age” : 12,

“isBool”: true // 最后的key value 不能加逗号

}

通过工具进行校验:

https://www.bejson.com/

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

③-php里面如何处理json格式数据?

  1. 如何把php里面的复合数据类型转换为json格式的字符串数据?(json_encode 1. 中文 gb2312 2. Unicode编码

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 如何把json格式的数据转换为php里面的复合数组类型?(json_decode)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

备注:如果json_decode($jsonString) 不加第二个参数,则转换成php里面的一个标准对象

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 注意小的细节:在php里面如果要把一个复合数据类型,里面的中文,转换成json格式字符串,php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢?

http://www.laruence.com/2011/10/10/2239.html

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:如果中文使用的gb2312编码保存的,则转换不成功。

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

总结:在使用json_encode做复合数据类型转换的时候,如果数据里面存在中文,则必须是utf-8的编码,如果不是,则准换不成功。(千万注意:公司的老的项目使用的是gb2312编码的,这个时候在做接口处理的时候,特别注意,需要把gb2312转换成utf-8编码)。

4. 在php里面如果要把一个复合数据类型,里面的中文转换成json格式字符串,php里面的复合数据类型必须是utf-8的编码。并且转换后的中文数据使用的16进制Unicode编码。同时如果这个时候不希望将中文字符转换为16进制的编码该如何处理呢?

http://www.laruence.com/2011/10/10/2239.html

代码:

header(‘Content-Type:text/html;charset=utf-8’);

$data = array(‘name’=> ‘中文’);

echo json_encode($data, JSON_UNESCAPED_UNICODE);

效果:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

④-js里面如何处理json格式的数据?

  1. 如何把js里面的复合数据类型转换成json格式的数据?

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 如何把json格式的数据转换成js里面的复合数据类型?

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:也可以使用eval 转换(eval可以执行一个满足js语法格式的字符串)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

网站:https://www.zhihu.com/question/19884767

  1. 在jQuery里面也提供对应的转换函数,遍历函数

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. json2.js文件,可以在js里面把对象和字符串相互的转换( JSON.parse 和 JSON.stringify 一样,只是做了一个浏览器的兼容性处理,一般在自己的项目的html文件,引入该文件即可,自己会做兼容操作:如果低版本的浏览器不存在JSON.parse 和 JSON.stringify 则使用json2.js文件里面提供的;如果浏览器存在两个方法,则使用浏览器本身提供的方法处理)

网站:https://github.com/douglascrockford/JSON-js

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

Ajax之文件上传

文章:http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

http://blog.csdn.net/inuyasha1121/article/details/51915742

①-简介

  1. 使用Ajax实现文件的上传,但是这个标准只在w3c高版本的浏览器里面有实现,是属于一个ajax level2的标准。在低版本的IE里面是不兼容的。

网站:https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

  1. 在使用Ajax做文件上传的时候,需要借助一个FormData对象,这个对象具有收集表单数据的能力,可以收集表单里面普通的数据,也可以收集文件信息。可以参考下面提供的文件。

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

②-FormData对象简单使用

在ajax里面做无刷新文件上传之前,我们需要先了解一个叫做FormData对象,然后这个对象可以帮我们去收集表单的数据(1. 基本数据 text 2. 可以收集上传文件)。

  1. 设计一个如下的注册的表单(收集基本数据 text password)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 利用FormData对象收集表单数据,然后使用Ajax技术发送给后台

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

注意:在使用FormData对象收集表单数据,使用Ajax发送POST请求的时候,不要设置请求头,如果设置,在服务器端,则无法正常收集post提交的数据信息。

  1. 服务器定义一个 register.php 文件,接收ajax请求

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

③-文件上传-显示进度条效果

进度条效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

需求分析:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 由于我们上传要显示进度条,文件一般都是很大的文件,所以需要修改post上传数据的大小。
  2. 整个表单提交的大小

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

b. 单个文件提供的大小

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 创建一个上传文件的表单页面

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 使用Ajax做文件上传的时候,我们需要不断得知文件已经上传文件的大小和文件总大小的一个百分比。

    1. (loaded size )/ ( total size) 等于小的div宽度的百分比
    2. 如何获取文件已经上传的大小和总大小?

答:利用Ajax leval2 第一个新的方法(在这个Ajax对象上面存在一个upload属性,属性里面存在一个onprocess属性,可以这个属性设置一个回调函数,这个回调函数,会在有文件上传的时候,距离一定的间隔进行触发调用)

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 在浏览器使用ajax完成图片上传

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传
Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 定义一个register.php文件,接收ajax请求,完成上传

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

6. 效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

④-上传插件

现在一般来说我们很少自己使用ajax进行文件上传,一般都使用现成插件进行完成。底层的原理使用的 FormData 对象 + ajax ,注意,如果是低版本的IE浏览器也需要做无刷新文件上传,则FormData对象不能在使用,则我们可以使用 iframe技术进行无刷新上传。

插件:

  1. 百度出的 webuploader

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. zyupload

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

Ajax跨域问题

①-什么是跨域?

答:当使用Ajax技术去请求本域名的资源信息的时候,是可以直接请求的。但是如果去别的域名的资源信息的时候,这个时候由于浏览器的一个同源政策的限定,是不允许直接去获取别的域名下的资源信息。

例如:www.sinsea.cn/index.html(ajax) —————>http://www.tngou.net/doc/food(提供的一个接口)

上面的这种请求就是一个跨域请求。

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

②-浏览器的同源政策是什么?

答:现代的浏览器默认只能让Ajax去请求本域名里面的资源信息,如果要请求域名的资源信息,则是不允许的。(备注:严格是是允许请求,但是请求后,会把响应的数据丢弃掉)

为什么浏览器存在同源政策的限定?

答:主要是为了安全。但是由于现在的项目融合比较多,肯定存在跨域的需求。

③-跨域示例

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

本域名:local.php.com

请求域名:local.test.com

两个域名不是同一个域。则使用ajax请求就会报错。

④-跨域成熟的解决方案

对于Ajax的跨域成熟的解决方案存在如下三种:

  1. jsonp技术【最早技术来解决,比ajax还早】
  2. 同域代理【需要自己服务器进行处理】
  3. cors 响应头【缺陷 HTML5新标准,现代浏览器才支持】

目前使用最多应该是jsonp技术。其次就是同域代理。最后cors设置

jsonp的原理-只支持get方式-需要目标网站支持

简介

  1. 由于同源政策的限定,Ajax是没办法直接请求别的域名的资源信息
  2. 但是img script 等标签,可以发送网络请求,这些标签不受同源政策的限定
  3. 我们可以动态去创造一个script标签,然后把它的src设置我们请求的地址,然后请求的时候还传递一些参数(传递一个叫做callback参数)
  4. 请求的目标站,接受请求,过滤参数,对对应的数据格式化成json【把格式化后的json数据放置在传递过程中传递的一个叫做callback的回调函数里面】,然后在进行响应。

注意:jsonp只能完成get请求,同时jsonp需要目标网站的支持(把需要返回的数据填充在一个callback的回调函数里面)。

uuid相关资料:

http://www.jianshu.com/u/811a3c46491e

功能需求

请求历史上的今天进行数据获取

API接口:

https://api.asilu.com/

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

历史上的今天:

https://api.asilu.com/today/todayonhistory/

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

实操

  1. 在自己网站定义一个页面,使用jsonp完成网络请求

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

  1. 引入jsonp.js文件,使用jsonp进行数据请求

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

3. 效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

同域代理

由于jsonp的技术需要目标网站的支持完成get请求,然后才可以完成请求。现在可以在自己的域名下创建一个动态的脚本文件.php(服务器端不受同源政策的限定),让这个php文件帮我们发送目标网站的请求。

原理图:

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

场景:

1. A域名希望通过Ajax请求B域名接口提供的天气信息,直接请求存在跨域,肯定是不允许的

2. A域名的Ajax可以先请求A域名的一个动态的脚本文本(携带一个参数?请求的B域名目标网站),让该脚本文件帮我们请求B域名的接口,然后请求完成后,把数据进行返回给本域名A

3. A域名就可以通过中间的PHP脚本获取到数据

4. 中间的服务器充当的是一个代理人

代码:

A域名的Ajax请求

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

A域名的代理op.php 进行代理请求

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

cors设置响应头-需要注意目前只支持w3c的浏览器

网站:http://www.cnblogs.com/Darren_code/p/cors.html

网站:http://www.cnblogs.com/hustskyking/

网站:http://www.cnblogs.com/TomXu/

原理:在目标网站设置一个允许访问的响应头。

在B域名的目标网站,设置一个响应头

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

在A域名可以直接使用Ajax调用B域名的资源信息

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

扩展-允许cors进行跨域

接口:https://cnodejs.org/api/v1/topics

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

总结:

对于ajax跨域,其真实的解决方法只有 cors(响应头)。

用的 jsonp 、同域代理(解决ajax不能跨域的一种方案)。

功能-自己实现

头条网站接口:

http://v.juhe.cn/toutiao/index?type=&key=d0c418c9d5324a8ddf197e85c3dc9c5a

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

不支持 jsonp 也不支持 cors 。那么只能进行同域代理。

效果

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

加载更多

Ajax(二)用户注册验证、无刷新分页、underscore工具库、json、跨域、Ajax文件上传

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.liyouran.top/?p=3244
喜欢 (0)
发表我的评论
取消评论
表情 代码 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址