您的位置：首页 > Web前端 > JQuery

jquery收集页面参数生成xml，用于与server做数据交互

2017-02-09 17:33 190 查看

　　　　本博客是自己在学习和工作途中的积累与总结，仅供自己参考，也欢迎大家转载，转载时请注明出处。　　

　　　　http://www.cnblogs.com/king-xg/p/6382603.html

　　通过jquery来手机页面隐藏域或含有name属性的input标签值，生成XML字符串传送到服务器，可通过dom4j的xml解析技术进行参数获取

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<title>页面参数收集插件</title>
<script type="text/javascript">

function clickBT(){
var str = collect();
$("#text").text(str);
}

function collect(){
var head = '<?xml version="1.0" encoding="UTF-8"?>';
var root = $("<root></root>");
var arr = $(document).find(":input[type='hidden'][path],:text[path],:hidden[path],:password[path],input[path],span[path],textarea[path],select[path]");
var xml = "";
for(var i = 0; i < arr.length; i ++){
if(i+1 >= arr.length){
xml = splitArr($(arr[i]),root);
break;
}
splitArr($(arr[i]),root);
}
return (head+"<root>"+xml+"</root>");

}

function splitArr(obj,root){
var path = obj.attr('path').toLowerCase();
// 拆分path
var paths = path.split("/");
var reg = /\[[A-Za-z0-9]+\]/;
var pnode = root;
for(var i = 0; i < paths.length;i ++){
if(reg.test(paths[i])){
var tagName = paths[i].substring(0,paths[i].indexOf('['));
var index_str = paths[i].substring(paths[i].indexOf('[')+1,paths[i].indexOf(']'))
var index = parseInt(index_str);
// 存在[],多层次节点
// 判断是否存在该索引的节点
if(pnode.children(tagName).length < index+1){
// 不存在该标签
var node = $("<"+tagName+">"+"</"+tagName+">");
pnode.append(node);
pnode = node;
}else{
// 存在该标签
pnode = pnode.children(tagName).eq(index);
}
}else{
// 不存在[]
// 判断是否存在该标签
if(pnode.children(paths[i]).length==1){
pnode = pnode.children(paths[i]).eq(0);
}else{
// 打印错误
if(pnode.children(paths[i]).length>1){
throw new Error("标签:"+paths[i]+"--存在多层次节点");
return null;
}
var node = $("<"+paths[i]+">"+"</"+paths[i]+">");
pnode.append(node);
// 初始化pnode
pnode = node;
}
}
}
//pnode.text("<![CDATA["+obj.val()+"]]>");
pnode.text(obj.val());
return root.html();
}

</script>
</head>
<body>
<input type="hidden" path="project/persons/person[0]/name" value="king"/>
<input type="hidden" path="project/persons/person[0]/age" value="21"/>

<input type="hidden" path="project/persons/person[1]/name" value="arise"/>
<input type="hidden" path="project/persons/person[1]/age" value="20"/>

<input path="project/base_info/project_name" value="功能性项目"/>
<input path="project/base_info/create_time" value="2017-02-07"/>

<input type="text" path="project/base_info/money" value="100" />
<input type="text" value="xxx" />

<textarea path="project/base_info/msg">king</textarea>

<select id="sele" path="second_message/sec_msg">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<span path="message/text">it is only text!</span>

<input path="project/books/book[0]/menu/section[0]" value="章节0"/>
<input path="project/books/book[0]/menu/section[1]" value="章节1"/>
<input path="project/books/book[1]/menu/section[0]" value="</section>"/>
<input path="project/books/book[1]/menu/section[1]" value="章节1"/>
<input path="project/books/book[2]/menu/section[0]" value="章/r/n节0"/>
<input path="project/books/book[2]/menu/section[1]"/>
<input path="project/books/book[2]/menu/section[2]" value="章节2"/>
<input type="button" name="collection" value="collect" onclick="javascript:clickBT()" />

<textarea id="text" style="width: 500px;height: 400px;"></textarea>
</body>
</html>

 

 

若有不足之处，还望指出!
　　　　　　　　　　　　　　　　　　　

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航