简单了解Ajax表单序列化的实现方法

原生表单序列化

随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化

在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。

在进行表单序列化之前,需要弄清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。

  • --对表单字段的名称和值进行URL编码,使用和号(&)分隔
  • --不发送禁用的表单字段
  • --只发送勾选的复选框和单选按钮
  • --不发送type为"reset"和"button"的按钮
  • --多选选择框中的每个选中的值单独一个条目
  • --在单击提交按钮提交表单的情况下,也会发送提交按钮,否则不发送提交按钮
  • --<select>元素的值,就是选中的<option>元素的value特性的值。如果<option>元素没有value属性,则就是<option>元素的文本值

实现表单序列化的函数为:

function serialize(form){
var parts=[],
field=null,
i,
len,
j,
optLen,
option,
optValue;
for (i = 0; i < form.elements.length; i++) {
field=form.elements[i];
switch (field.type) {
case 'select-one':
case 'select-multiple':
if(field.name.length){
for (var j = 0; j < field.options.length; j++) {
option=field.options[j];
if (option.selected) {
optValue="";
if (option.hasAttribute) {
optValue=(option.hasAttribute('value') ? option.value : option.text);
}else{
optValue=(option.attribute['value'].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文本输入
case "submit": //提交按钮
case "reset": //重置按钮
case "button": //自定义按钮
break;
case "radio": //单选按钮
case "checkbox": //复选框
if (!field.checked) {
break;
}
//执行默认操作
default:
//不包含没有名字的表单字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Ajax serialize() 表单进行序列化方式上传文件

    通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <p>上传文件:<input type ="file" name="file"/></p> <input type="subm

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • 简单了解Ajax表单序列化的实现方法

    原生表单序列化 随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化 在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化. 在进行表单序列化之前,需要弄清楚在表单提交期间,浏览器是怎样将数据发送给服务器的. --对表单字段的名称和值进行URL编码,使用和号(&)分隔 --不发送禁用的表单字段 --只发送勾选的复选框和单选按钮 --不发送type为"reset&qu

  • Yii2简单实现给表单添加验证码的方法

    本文实例讲述了Yii2简单实现给表单添加验证码的方法.分享给大家供大家参考,具体如下: 控制器SiteController: class SiteController extends Controller { // ... public function actions() { return [ // ... 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'fixedVerifyCode' => YII_ENV_TEST ?

  • js表单序列化判断空值的实例

    学习javaweb的时候,做了将页面上的的表单信息添加到数据库中的练习.提交表单的时候,需要保证每个输入框.单选按钮.复选框等都不为空,刚开始的时候挨个获取控件的值进行判断是否为空,后来认识了表单序列化这么一个方法,就是了下用序列化来判断空值 //form表单页面 <form id="basicInfo" action="EmployeeServlet?flag=addEmployeeInfo" method="post"> <

  • 基于Ajax表单提交及后台处理简单的应用

    首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$("xxid").val()等就完了,但如果一张表单收集的数据很多,像这样的表单又有很多张,那用此方法肯定麻烦死,并且容易眼花录错.所以,我们就可以简单的来定义一个收集规则,如在要回传到服务器的数据表单控件,可以做个标记,到时取的时候把这些标记的数据一起取回去. 就拿最简单的文体输入做例子吧<input type="text&quo

  • 表单序列化与jq中的serialize使用示例

    复制代码 代码如下: <!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/1999/xhtml"> <head> <title></title

  • JS中from 表单序列化提交的代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: // ----ajax begin $.ajax({ type: "POST", url: "../compRule/updateRuleById?tids="+compTableName_val+"&isReportName="+$('#isReport_update').val()+"&heji_add="+$('#heji_update').val()

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

  • jQuery 表单序列化实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象 dataType: "json"

  • 原生js实现form表单序列化的方法

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

随机推荐