zoukankan      html  css  js  c++  java
  • js ajax方式拼接参数

    项目采用前端easyui+后端handler方式,一个老套的组合,比较适合当前的团队。

    项目中有大量场景是做数据展示,主要是收集表单上的参数,统一提交到后端进行sql语句的拼装然后json序列化到前端grid控件上。

    为减少前后端代码量,约定好前端和后端字段保持一致,前端封装一个js函数负责收集参数提交到后端,后端动态解析转换为sql语句where部分。

    //获取容器的键值对
    function getParams(elem) {
        var params = {};
        $(elem).find("*").each(function () {
            if ($(this).attr("name")) {
                var key = $(this).attr("name");
                var value = "";
                if ($(this).val()) {
                    value = $(this).val();
                } else {
                    value = $(this).text()
                }
                if (value != "") {
                    params[key] = value;
                }
            }
        });
        return params;
    }
    //将键值对组装为URL参数格式
    var parseParam = function (param, key) {
        var paramStr = "";
        if (param instanceof String || param instanceof Number || param instanceof Boolean) {
            paramStr += "&" + key + "='" + encodeURIComponent(param) + "'";
        } else {
            $.each(param, function (i) {
                var k = key == null ? i : key + (param instanceof Array ? "[" + i + "]" : "." + i);
                paramStr += '&' + parseParam(this, k);
            });
        }
        return paramStr.substr(1);
    };

     js提交的时候只需要传入参数的容器即可。

     function search() {
                var params = getParams("#customtb");//收集容器里查询条件
                $('#myGrid').datagrid('load', { 't': 'search', keyWord: parseParam(params) });
            }

    后端解析,如果不涉及条件的特殊处理,后端得到参数直接替换&为and即可,因项目中有时间字段,做了特殊处理。

     public static string TranlateUrl2QueryString(string strParams)
            {
                string sql = "";
                if (!string.IsNullOrWhiteSpace(strParams))
                {
                    string[] arrParams = strParams.Split('&'); //dtStart='2016-05-04' 
                    List<string> list = new List<string>();
                    foreach (string s in arrParams)
                    {
                        if (s.ToLower().StartsWith("dtstart"))//时间的特殊处理
                        {
                            string[] keyPairs = s.Split('=');
                            string sqlKeyPairs = string.Format(" MODIFYON > to_date({0}, 'yyyy-MM-dd') ", keyPairs[1]);
                            list.Add(sqlKeyPairs); //sqlWhere += sqlKeyPairs;
                        }
                        else if (s.ToLower().StartsWith("dtend"))
                        {
                            string[] keyPairs = s.Split('=');
                            string sqlKeyPairs = string.Format(" MODIFYON < to_date({0}, 'yyyy-MM-dd') ", keyPairs[1]);
                            list.Add(sqlKeyPairs);
                        }
                        else
                        {
                            list.Add(s);
                        }
                    }
                    sql = Utils.URLDecode(" where " + string.Join(" and ", list));
                }
                return sql;
            }
  • 相关阅读:
    Web前端开发资源集锦
    刮刮卡效果
    html5游戏驴子跳
    Bootstrap3实现的响应式幻灯滑动效果个人作品集/博客网站模板
    40款免费社交图标素材
    移动端的推拉效果导航菜单-支持响应式及其多层菜单
    通过HTML5 Visibility API检测页面活动状态
    HTML5游戏开发引擎Pixi.js新手入门讲解
    滚动触发的翻转式文字引用效果
    11个实用的CSS学习工具
  • 原文地址:https://www.cnblogs.com/jingsha/p/5690484.html
Copyright © 2011-2022 走看看