iT氪,IT人的社区

51dev.com 技术开发者社区

Javascript实现前端简单路由

Javascript实现前端简单路由

WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁。同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。 前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。 本文将使用javascript实现一个极其简单的路由实例。 HT...

将复杂form表单序列化serialize-object.js

将复杂form表单序列化serialize-object.js

jQuery有个方法$.fn.serialize,可将表单序列化成字符串;还有个方法$.fn.serializeArray,可将表单序列化成数组。那如果要将表单序列化成对象或者JSON格式数据,该如何操作呢? 在实际项目开发中,我们可能会遇到复杂表单的提交处理,我们使用Ajax异步来将这个足够复杂的表单提交给后端处理。常规的办法是将表单各个字段组成字符串或者json格式,然后post给后端PHP处理,这样的话稍微复杂的表单就会让前端会非常累,因为要一个个表单字段处理。而jQuery自带的$.fn.serialize和$.fn.serializeArray都不能满足需求。幸好,我给大家介绍...

jquery formatCurrency货币格式化处理

jquery formatCurrency货币格式化处理

jquery formatCurrency是一个对货币格式进行格式化输入控制、显示的一个jquery插件,可以对文本框输入进行货币合法性验证,并且支持对文本输入字符串进行格式化显示。(国内的会计记账法是保留两位小数,整数位每3个千位使用,号隔开) 1.引入jquery和插件(jquery省略) <script src="jquery.formatCurrency-1.4.0.js" type="text/javascript" ></script> 2.使用插件API方法 // 如将页面所有表格的金额单元格格式化显示 $('.label...

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过Ajax方式上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文件名: <input type ="text" name="filename" /></p> <p...

移动端 web 开发初探之 Vuejs 的简单实战

移动端 web 开发初探之 Vuejs 的简单实战

这段时间在做的东西,是北邮人论坛APP的注册页。这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。 内容提要: meta标签 Vuejs的简单实战 CSS移动端全屏背景 CSS移动端动画初探 meta标签 这点与在PC端写前端有着很大的区别,移动端的meta标签简直多。我就说说我所用到的标签。 <!-- 1、如果支持Google Chrome Frame:GCF,则使用GCF渲染;2、如果系统安装ie8或以上版本,则使用最高版本ie渲染;3、否...

从Vue.js窥探前端行业

从Vue.js窥探前端行业

近年来前端开发趋势 1.旧浏览器 逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的;IE9+、chrome、sarafi、firefox对ES5是完全支持的,移动端大部分浏览器是基于webkit内核,所以ES5在移动端也是全面支持的,因此vue可以在移动端以及现代浏览器中大显身手。 2.前端交互越来越多,功能越来越复杂 : 现在的前端可谓是包罗万象,比如高大上的技术库和框架、酷炫的运营活动页面、H5小游戏,当然前端技术的应用在更多具有商业价值的应用上,比如下图。 3.架构从传统后台MVC向RE...

windows下搭建Vue.js开发环境

windows下搭建Vue.js开发环境

1、安装node.js node.js的官方地址为:https://nodejs.org/en/download/。 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。   2、设置global和cache路径 设置路径能够把通过npm安装的模块集中在一起,便于管理。 (1)在nodejs的安装目录下,新建node_global和node_cache两个文件夹,如安装目录为“D:\nodejs\” (2)用命令npm co...

jQuery 取值、赋值的基本方法整理

jQuery 取值、赋值的基本方法整理

这篇文章主要介绍了jQuery 取值、赋值的基本方法,需要的朋友可以参考下 /*获得TEXT.AREATEXT的值*/  var textval = $("#text_id").attr("value");  //或者  var textval = $("#text_id").val();  /*获取单选按钮的值*/  var valradio = $("input[@type=radio][@checked]").val();  /*获...

jquery Ajax serialize()表单进行序列化方式上传文件附件图片

jquery Ajax serialize()表单进行序列化方式上传文件附件图片

serialize可以实现数据的post提交或get提交了,如果我们要上传文件就必须使用post提交了,下面我们来看一篇关于Ajax serialize()表单进行序列化方式上传文件吧。 通过Ajax serialize()表单进行序列化方式上传文件,使用FormData进行Ajax请求 通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= /cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> &l...

jQuery ajax()使用serialize()提交form数据

jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> </form> $(docume...

使用jsonp完美解决跨域问题

使用jsonp完美解决跨域问题

在项目中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘,这个问题和安全机制有关,默认不允许跨域调用,这里记录一下解决方案,防止以后再犯相同的错误。 调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处...

AngularJS与双向绑定

AngularJS与双向绑定

前几天叨逼叨了《前端利器之Bootstrap》,写了几个小Demo,其实是为了说明前端构建一个还看的过去的网页是多么的简单,也说了Bootstrap是一个前端框架,其实Ta的本质是一个CSS系统,也就是定义好了特别多的样式供你选择,有一些轮播之类的界面其实是用JS封装了一些小插件共用户使用,但从用户角度或者开发者角度来看,Ta仍然是一个UI库,或者叫做UI组件库。 用一句话总结:Bootstrap解决了快速构建一个网页框架和样式的问题。 但还有一类问题待解决,就是如何构建一个动态网页的问题,或者叫做如何构建一个WebApp。 构建一个动态网页,不得不提到前端JS框架(我们可以...

基于Bootstrap的后台管理面板:Bootstrap Metro Dashboard

基于Bootstrap的后台管理面板:Bootstrap Metro Dashboard

这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面。 Bootstrap Metro Dashboard介绍 Bootstrap Metro Dashboard使用了以下jQuery插件: fullcalendar.min.js jquery.chosen.min.js jquery.cleditor.min.js jquery.cookie.js jqu...

JavaScript 那些鲜为人知的玩法

JavaScript 那些鲜为人知的玩法

Stack OverFlow 的联合创始人杰夫·阿特伍德(Jeff Atwood)曾提出著名的“Atwood定律”,即: Any application that can be written in JavaScript, will eventually be written in JavaScript. 任何能够用 JavaScript 实现的应用,最终都必将用 JavaScript 实现。 毫无疑问,JavaScript 已然成为当下最流行的编程语言之一,这点已经不需要争论了,不服的话前后端乃至全栈工程师肯定跟你急。最近,ha...

node.js入门学习之url模块

node.js入门学习之url模块

前言 今天主要记录的是关于node.js里面的一个简单的模块,url模块。这个url的模块要使用的话需要先引入。若只是在命令行里比如cmd或git bash 等使用url这个模块的话,是不需要require进来的。直接使用便可。 引入模块     var url = require('url'); 一、url.parse()     /* url.parse(urlString[,parseQueryString[,slashesDenoteHost]]) * urlStr...