第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据
封装库,表单序列化方法
/** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和value值,无法连缀
* 参数是要获取指定表单的原生态对象
* 返回,包含表单数据的对象,如,{表单数据}
**/
feng_zhuang_ku.prototype.xu_lie_biao_dan = function (form) {
var parts = {};
for (var i = 0; i < form.elements.length; i++) { //根据表单字段长度循环
var filed = form.elements[i]; //得到没一项表单的字段
switch (filed.type) { //判断得到字段的属性
case undefined:
case 'submit':
case 'reset':
case 'file':
case 'button':
break; //如果是以上几种的一种直接跳出
case 'radio':
case 'checkbox':
if (!filed.selected) break; //如果是以上两种,判断是否被勾选,没勾选直接跳出
case 'select-one':
case 'select-multiple':
for (var j = 0; j < filed.options.length; j++) { //下拉选项
var option = filed.options[j];
if (option.selected) {
var optvalue = '';
if (option.hasAttribute) { //非ie
optvalue = (option.hasAttribute('value') ? option.value : option.text); //value值存在取value值,value值不存在取text值
} else { //ie
optvalue = (option.attributes('value').specified ? option.value : option.text); //value值存在取value值,value值不存在取text值
}
parts[filed.name] = optvalue; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
} }
break;
default:
parts[filed.name] = filed.value; //如果不是以上情况,将表单字段的name值加上value值,添加到对象
}
}
return parts;
};
表单序列化结合ajax提交数据效果图
提交到hj.php,返回
前台js
var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表单数据,返回对象
$().Ajax({ //执行Ajax数据传输
method:'post', //post方式发送
url:'hj.php', //发送到hj.php
data:biaodan, //发送内容,序列化获取到的表单对象
success:function (text) { //执行回调函数
alert(text); //打印出hj.php接收到的数据
},
async:true //异步模式
});
hj.php
<?php
echo 'www.jxiou.com';
print_r($_POST);
?>
第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据的更多相关文章
- 第一百五十八节,封装库--JavaScript,ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 第一百五十三节,封装库--JavaScript,表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第三百五十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)介绍以及安装
第三百五十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)介绍以及安装 elasticsearch(搜索引擎)介绍 ElasticSearch是一个基于 ...
- 第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection)
第三百五十四节,Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection) Scrapy提供了方便的收集数据的机制.数据以key/value方式存储,值大多是计数 ...
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十六节,封装库--JavaScript,延迟加载
封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...
- 第一百三十九节,JavaScript,封装库--CSS选择器
JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 第一百六十九节,jQuery,基础事件
jQuery,基础事件 学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即 ...
随机推荐
- MySQL数据库如何与EXCEL的XLS格式相互转换
1 将SQL导出为EXCEL方法,有如下数据库(my_impa),里面有两张表 2 如果是EXCEL格式,一定要勾选"将字段名称放在首行",否则待会儿导入的时候就需要你手工新建字段 ...
- vue - index.html
描述:通过App.vue绑定#App元素(进行展示).div#id中间写入任何内容都会失效. <!DOCTYPE html> <html> <head> <m ...
- SQL数据库有阻塞就自动发邮件警报
1.建查询是否有阻塞的视图 create view [dbo].[VW_WaitingCount] as SELECT s.session_id, r.blocking_session_id, s.h ...
- 【leetcode】Reorder List (python)
问题的思路是这样: 循环取头部合并,事实上也能够换个角度来看,就是将后面的链表结点,一次隔空插入到第一部分的链表中. class Solution: # @param head, a ListNode ...
- 【VBA编程】02.调试VBA程序
初次编写程序并不一定能成功的运行,可能其中还存在逻辑上或语法上的错误,此时就需要逐步调试,排查错误,一般情况下,编写程序的工作讲究的是三分编程,七分调试. [代码区域] Sub Second() Di ...
- struts result动态结果集 带参数的结果集
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &qu ...
- Grunt快速使用笔记
本篇文章由:http://xinpure.com/grunt-quick-note/ http://www.gruntjs.net/getting-started Grunt中文网 安装 Grunt ...
- android 签名、混淆打包
1.android 签名 使用eclipse导出带签名的apk,最简单的方式. 最后一步finish ,就能导出一个xxx.keystore的文件了. 下次再发布新版本的时候,使用这个生成的签名继续使 ...
- Android五天乐(第一天)开发环境的部署,开发流程与调试
由于项目要求參与无线端开发,本着技多不压身的指导精神,决定依旧从web转攻client! 由于之前自己玩过两个月android(实际上仅仅是做了两个有失水准的demo级app),本来以为这次再来学习将 ...
- Mac 常用的手势
可以在触屏版-更多手势查看 技巧:前期慢慢滑动练习.一定要慢慢滑动,这样可以清楚的看出有没有产生效果,尤其注意大拇指滑动的感觉. 回到桌面:四指向外 打开Lanuchpad:四指向内 查看所有任务:三 ...