移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动

最近好多天没有更新文章,是因为公司的项目忙的不行.今天有点时间,就突然想起在移动端项目中遇到三级联动的问题,网上查了很多资料,都是依赖各种插件,或者晦涩难于理解.于是,自己决定写一个出来. 当然,没有用到别的插件类库,也没有用ajax.写完这个小demo也学到不少,现在分享给大家代码.因为代码较多,我就不一个个解释了,源码里面添加了很多注释. 为了便于大家使用,我将html精简了许多. 结尾会有在线运行地址. 0 <!DOCTYPE html> 1 <html lang="en…

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库用法在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla…

移动端lCalendar纯原生js日期时间选择器

网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错.今天偶尔有同行给提供了一个日期插件lCalendar,该插件是用原生js写的,不基于任何第三方库,大概看了一下效果,觉得还不错,就在这里分享了出来. lCalendar纯原生js日期时间选择器DEMO下载地址: lCalendar纯原生js日期时间选择器感谢cometwo在网络上上传的该插件ht…

ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一个判断是 ajax 请求的常量 IS_AJAX: Ajax 请求常用的有两种情况:一种是原生 js 的 ajax 请求.一种是 jQuery 的 ajax 请求. 分析: 先看看使用 jQuery 中使用 ajax 发送请求的时候的头信息: Accept: application/json, tex…

省市县三级联动js代码

省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧,省市.县级联菜单,分享给大家. 示例: <html> <head> <title>省市县关联菜单</title> <meta http-equiv="Content-Type" content="text/html; cha…

纯原生js移动端城市选择插件

接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个select标签!!!这在移动端上的体验太low了,我想以我的脾气肯定是要自己做的,正好之前做了日期选择,那就依葫芦画瓢自己再做一个吧,来来来,先上效果图: 用法在html页面中引入input标签,写法如下: <input id="demo1" type="text"…

类似jQuery的原生JS封装的ajax方法

一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装真正的核心就是这段代码: var xhr = new XMLHTTPRequest(); xhr.open("method", "url", "async"); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readystat…

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; var ajax = function (url, options) { if (typeof url ==…

ajax(省，市，县)三级联动

下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑第一步:先做一个省市区表格第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号首先我们要建立数据库: 这就是包含省,市,县的数据库, 下面我们就写主页面:sanji.php:…

第八篇一个用JS写的省市县三级联动

前些天,做网站用需要用到一个省市县的三级联动,数据要从数据库里面读取,我想了下思路,动手写了下来. 一.思路 js利用Ajax读取控制器里面的函数,利用函数读取存储过程,返回json.利用JS处理Json构建数组,利用索引加载到下拉菜单中二.具体实现 1.数据库的设计(数据是提前设计好的,只能对现有的数据库进行编写) 编写存储过程如下SQL: ALTER PROCEDURE [dbo].[getstatisticProvince] A…

ajax+struts2 实现省份-城市-地区三级联动

1.需求分析 2.js部分(通过ajax异步请求实现) 省份-->城市联动城市-->地区 3.struts部分 struts.xml action部分 4.service部分 5.总结通过这个demo可以巩固ajax的异步请求,以及struts2返回json格式的数据.…

AJAX省市县三级联动的实现

省市县数据本例子中省市县数据保存在MySQL数据库中,部分数据截图如下: 从数据库中读取数据导入需要的jar包连接池配置文件 <c3p0-config>  <default-config> <property name="driverClass">com.mysql.jdbc.Driver</property> <property name="jdbc…

js实现的省市县三级联动的最新源码

<!DOCTYPE html> <html> <head> <title>省市区三级联动</title>   <script type="t…

原生JavaScript的省市县三级联动

三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动菜单</title> <style> select { font-family: &qu…

纯原生js移动端日期选择插件

最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又长还收费,我就忍不住自己做了一个,也不过就10几kb的事情嘛,想想独乐乐不如众乐乐,如果伙伴们手上没有轻量级的日期选择插件不如先拿我这个应付一下吧! 项目截图: 项目地址:https://github.com/xfhxbb/LCalendar…

自制移动端纯原生 Slider滑动插件

在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件. 这只是个半成品,仅仅实现了手指滑动.自动轮播.跳转等基本功能.代码撑死了200行不到,用的原理也比较简单粗暴. 点击跳转到Github上代码地址.扫描下面的二维码可以查看在线demo: 一.实现原理与效果 1)在下图中,将“ul”容器设置为相对定位,子标签“li”设置为绝对定位…

原生js，jquery ajax请求以及jsonp的调用

ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 …

使用原生JS封装一个ajax

function ajax(data){ //第一步,创建XHR对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//标准的浏览器 }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');//万恶的IE浏览器 } //第二步,准备发送前的一些配置文件 var type = data.type == 'get' ? 'get' : 'post'; var…

用纯原生js实现jquery的ready函数(两种实现)

第一种实现方式: var dom = new function() { var dom = []; dom.isReady = false; dom.isFunction = function(obj) { return Object.prototype.toString.call(obj) === "[object Function]"; } //先会执行下面的分支函数,然后执行dom.initReady()函数,因为要等到DOM建完后才会执行 dom.Ready = functio…

纯原生JS大图轮播

CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; height: 300px; margin: 0 auto; border: 1px solid black; overflow: hidden; } #banner_move { position: relative; top: 0px; left: 0px; height: 300px; width: 5000p…

【方法】原生js实现方法ajax封装

/* 参数说明* type[String] 请求方式('POST'或'GET') 默认设置'GET'方式* dataType[String] 获取到的后台数据格式默认'JSON'格式* async[String] 是否异步执行默认true异步执行* data[Object] 请求参数* success[Function] 成功回调函数* fail[Function] 失败回调函数*/ function ajax({type, dataType, async, data, url, succe…

jquery+php+mysql实现Ajax省市县三级联动

1.第一步建立一个html页面的,放置省.市.县三个select选择框,代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="./js/jquery-1.8.3.min.…

AJAX省市县三级联动

效果开发结构参考AJAX,JSON用户校验主要有两个核心文件 1,处理输入字符,进行后台搜索的servlet linkage.java package org.guangsoft.servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; imp…

JS 省市县三级联动

$(".area").change(function(ent,arg){ var $this = $(this), level = $(this).attr("id"); $.ajax({ url:'/Order/selectAddress', data:{l:level,type:'ajax',id:$this.val()|arg}, success:function(ret){ var data = eval("("+ret+")&…

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.getElementsByTagName("div")[0]; //给元素绑定监听事件个人习惯把监听事件写在一块 objSection.addEventListener("touchstart", touchStart, false); objSection.addEve…

原生JS封装ajax方法

http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就需要用原生JS写一个ajax函数了. /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请…

用原生JS实现AJAX和JSONP

前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生JavaScript实现AJAX并不难,下面我们可是演示如何实现利用原生JS构建简单的AJAX,还有跨域请求JSONP的实现. AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象连接服务器发送请求接收响应数据下面我…

原生JS实现Ajax的跨域请求

原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 它的定义是: 一段脚本向后台请求数据,只能读取属于同一协议名.同一主机名.同一端口号下的数据: 所以,请求不同协议名.不同端口号.不同主机名下面的文件时, 将会违背同源策略,无法请求成功,需要进行跨越处理!! 解决跨域请…

原生 JS 与 jQuery 中的 AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换:AJAX 是一种用于创建快速动态网页的技术. AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数据): JavaScri…

原生js封装dom操作库

var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr, value) { if(typeof value !== "undefined") { document.documentElement[attr] = value; document.body[attr] = value; } return document.documentElem…

【移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动】的更多相关文章