jquery选择符快速提取web表单数据示例_jquery

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法。

以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法。

我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name属性,比如<input type="text" _postField="name" /><input type="radio" _postField="sex" />之类,然后用query获取所有存在_postField属性的dom对象,并进行遍历,封装成以_postField的值为key,其内容为value的json键值对,其js的方法如下:

复制代码 代码如下:

<script type="text/javascript>
function getFormField(sel){
var objs = $("*["+sel+"]");
var postData = {};
for(var i=0,len=objs.length;i<len;i++){
var obj = objs[i];
var nodeName = obj.nodeName.toLowerCase();
var field = $(obj).attr(sel);

if(nodeName=="input"){
if(obj.type.trim()=="radio"&&(obj.checked||obj.checked=="checked")){

postData[field] = $(obj).val();
continue;
}
if(obj.type.trim()=="checkbox"&&(obj.checked||obj.checked=="checked")){
var ov = postData[field]||"";
var nv = ov+","+$(obj).val();
postData[field] = nv.replace(/^,+/,"");
continue;
}

if(obj.type.trim()=="text"||obj.type.trim()=="hidden"){
postData[field] = $(obj).val();
continue;
}

continue;
}

if(nodeName=="textarea"){
postData[field] = $(obj).val();
continue;
}

if(nodeName=="select"){
var val = obj.options[obj.selectedIndex].value;
postData[field] = val;
continue;
}

postData[field] = $(obj).html();

}

//返回从表单获取数据的json数据
return postData;
}
</script>

测试代码:

复制代码 代码如下:

<form style="margin-left:200px; margin-top:300px;">
<input type="text" value="" _postField="name" /><br /><br />
<input type="radio" value="男" name="sex" _postField="sex" />男
<input type="radio" value="女" name="sex" _postField="sex" />女
<input type="radio" value="中性" name="sex" _postField="sex" />中性 <br /><br />
<select _postField="job">
<option value="上班">上班</option>
<option value="讨饭">讨饭</option>
<option value="啥都不相干">啥都不相干</option>
</select>
<br /><br />
<input type="button" value=" OK " onclick="test();" />
</form>
<script>
function test(){
var postData = getFormField("_postField");

var sb = [];
for(var o in postData){
sb.push(o+"="+postData[o]);
}
alert(sb.join("\n"));
}
</script>

 

以上例子的表单域比较少,一些东西体现不出,但当表单域的数量比较多少时,就能体现出其方便性,而且重用性较好;再者,如果用jquery异步提交的话,连手动封装json数据的操作都省了。
也有人可能不愿意给表单域增加类似“_postField”的自定义字段,那就直接用本身就有的name也行,这只是jquery选择符的使用不同,其实质还是一样的。

时间: 2024-12-26 22:59:00

jquery选择符快速提取web表单数据示例_jquery的相关文章

jquery选择符快速提取web表单数据示例

 遇到要重复多次同样的事时,就想找一种省时省力的方法,下面就为大家介绍下利用jquery选择符快速提取web表单数据 本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法.    以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法

初窥JQuery(一)jquery选择符 必备知识点_jquery

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的

jQuery选择符介绍 jQuery选择符怎么用

jQuery选择符介绍 1.CSS选择符 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. 2.jQuery库支持XPath选择符 如: 3.$('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: 4.$('div[ol]')为取得所以包含一个ol属性的div元

jquery清空表单数据示例分享

 这篇文章主要介绍了jquery清空表单数据的示例,需要的朋友可以参考下  代码如下: function clearForm(form) {   // iterate over all of the inputs for the form   // element that was passed in   $(':input', form).each(function() {     var type = this.type;     var tag = this.tagName.toLower

jQuery ajax中使用serialize()方法提交表单数据示例_AJAX相关

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({   type: "POST",   url: ajaxCallU

jQuery ajax中使用serialize()方法提交表单数据示例

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({    type: "POST",    url: ajaxCal

jQuery选择id属性带有点符号元素的方法_jquery

本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

jQuery制作仿腾讯web qq用户体验桌面_jquery

jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上.jQuery用户体验设计,web qq桌面十分动感酷炫. 查看演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

jQuery通过ajax快速批量提交表单数据_jquery

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据. 请看下面的表单: <form id="fm"> <table> <tr> <td>姓名</td> <td> <input type="text" name="name" /> </td> </tr>