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

最新推荐文章于 2022-11-13 20:41:52 发布

aerpy26266

最新推荐文章于 2022-11-13 20:41:52 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/king-xg/p/6382603.html

版权

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

　　　　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" οnclick="javascript:clickBT()" />
        
        <textarea id="text" style="width: 500px;height: 400px;"></textarea>
    </body>
</html>

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

转载于:https://www.cnblogs.com/king-xg/p/6382603.html

aerpy26266

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery收集页面参数生成xml，用于与server做数据交互

　　　　本博客是自己在学习和工作途中的积累与总结，仅供自己参考，也欢迎大家转载，转载时请注明出处。　　　　　　http://www.cnblogs.com/king-xg/p/6382603.html　　通过jquery来手机页面隐藏域或含有name属性的input标签值，生成XML字符串传送到服务器，可通过dom4j的xml解析技术进行参数获取<!DOCTYPE ...
复制链接

扫一扫