zoukankan      html  css  js  c++  java
  • jquery收集页面参数生成xml,用于与server做数据交互

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

        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=" 500px;height: 400px;"></textarea>
        </body>
    </html>

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

  • 相关阅读:
    Java并发编程:volatile关键字解析(转)
    Java并发编程 Synchronized及其实现原理
    (a++)+(++a)=?
    Java集合中那些类是线程安全的
    Servlet 与 CGI 的比较
    JAVA中常见的锁以及其特性
    总结一下hashMap和hashtable方面的知识点
    Which statement is true?
    下面哪段程序能够正确的实现了GBK编码字节流到UTF-8编码字节流的转换:
    Kafka 详解(转)
  • 原文地址:https://www.cnblogs.com/king-xg/p/6382603.html
Copyright © 2011-2022 走看看