原生 js 将form 序列化

2024-09-07

原生js实现form表单序列化

当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序列化方法: 先介绍一下jquery中有相应的表单序列化的方法: 1.serialize()方法格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为

原生js表单序列化----- FormData

原生js（form）验证，可以借鉴下思路，应用到工作中

我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得臃肿,最好是原生js吧,轻量.幸运的等到这一课,加上之前所学,慢慢融合根据需求,应用到工作项目中... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

原生JS表单序列化

// 表单序列化,IE9+ HTMLFormElement.prototype.serialize = function() { var form = this; // 表单数据 var arrFormData = [], objFormData = {}; [].slice.call(form.elements).forEach(function(ele) { // 元素类型和状态 var type = ele.type, disabled = ele.disabled; // 元素的键值 v

表单：!!!常用JS： form 表单代码

手机(文本框): <input type="text" name="" maxlength="11" placeholder="" autocomplete="off"> 基本的表单验证 2016-3-8 <script> $(function(){ $('.fr-form').submit(function(event){ event.preventDefault();//阻止表单

Ajax进阶之原生js与跨域jsonp

什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request,"sum_two.html") import json def sendAjax(request): print(request.body) print(request.G

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

React.js实现原生js拖拽效果及思考

一.起因&思路不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

原生js封装ajax：传json，str，excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

C# 用原生JS进行文件的上传

1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&quo

原生JS 表单提交验证器

转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分,因此少数服从多数,无奈只能抛弃bootstrap等提供的布局,样式以及验证等一些列如此方便的组件,(他们拒绝使用的原因也令人发省). 那么问题就来了. 二.设计理念我们都知道,在抛开外部框架,仅仅用JS+css+html 去开

原生js动画效果（源码解析）

在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro/html/201410/23513.html 1.匀速动画效果说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR

原生js dom记忆的内容

1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelectorAllgetAttributesetAttributeremoveAttribute domobj.tagNamedomobj.innerHTML innerHTML与innerText的区别.http://akunamotata.iteye.com/blog/440863domobj.idd

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

表单验证--通过原生js模仿ajax的异步交互

今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道初学者都不容易,所以我在我的博客中分享自己的学习经验,以及一些好玩的东西!! 废话不多说开始吧: 还是从最初讲:表单:html+css+js 先是HTML: 表单表单HTML代码: <form id="reg" title="注册"> <div cl

跨浏览器的placeholder – 原生JS版

转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提供对输入字段预期值的提示信息,input为空且未获得焦点时显示,获得焦点时消失,非常实用.目前,大部分现代浏览器都对placeholder属性提供了支持,IE10也是支持的.如果需要使IE6~IE9等浏览器支持placeholder,只有借助js了. 在这些不支持原生placeholder属性的浏览

原生js+css实现重力模拟弹跳系统的登录页面

今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity 作用:设置一个元素的透明度定义和用法 opacity 属性设置元素的不透明级别. 默认值: 1 继承性: no 版本: CSS3 JavaScript 语法: object.style.opacity=0.5

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的文本数据交换格式 JSON具有自我描述性,更易理解 JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台.JSON解析器和JSON库支持许多不同的编程语言. 2. Python中JSON操作 import json 1. json.dumps() --> 序列化 /j

原生js的开发笔记

1.基本的dom操作 var a=document.getElementById('ma1').innerHTML;/获取html代码 alert(document.getElementById('ma1').getAttribute("id"));//获取属性 alert(document.getElementById('ma2').value);//获取值 2.获取select的值和文本信息,jquery的就非常简单了. var obj = document.getElementB

原生 js 将form 序列化

热门专题