欢迎使用CSDN-markdown编辑器

JQuery artDialog和getJSON方法运用

在网站开发中制作弹出小窗格，并能对窗格中的列出项进行选择，提交

• 基于springMVC和hibernate框架
• 弹出小窗格后调用getJSON进行异步操作
• 点击窗格中的内容（如单选框）再提交与后端Java代码进行交互

废话不多说，过分强调实现细节和需求也不合适，本小菜鸟仅就核心方法和大家分享

function _openWindow(questionId ,typeId){
    //以键值对形式发送将要传递窗口的数据
        art.dialog.data('questionId',questionId);
        art.dialog.data('typeId',typeId);
        //目标URL
        art.dialog.open("${base}/eva/theme/type/questions/nature/inner_kpb/o_list.jspx,{
            //窗口属性
            id:'typeId',
            title: '',
            width:870,
            height:650,
            fixed: true,
            lock: true,
            close: function () {    
        }   },false);

}

上一个js方法结束后会跳转到一个对应的action方法中，并打开一个新页面，在打开新页面的同时调用getJSON方法异步提交请求返回数据，对打开的页面进行所需要的渲染（如显示已经保存过的选项）

$(function(){
        //获取得到的参数
    var typeId = art.dialog.data('typeId');
    var questionId = art.dialog.data('questionId');
    $("[id=typeId]").val(typeId);
    $("[id=questionId]").val(questionId);
    // ajax请求回来当前的question的所有筛选条件
    $.getJSON("${base}/eva/theme/type/questions/nature/inner_kpb/o_natures_list.jspx", {questionId:questionId}, function(data) {
        //natureIds是一个数组
        var natureIds = data.natureIds;
        if(natureIds != ''){
            var ids = natureIds.split(",");
            for (i=0;i<ids.length ;i++ ){
                $("[id='"+ids[i]+"']").addClass('this');
           //如果异步调用成功，就将对应id的页面元素赋予一个样式
            }
        }
    });
    });

接受getJSON的后端代码

    @RequestMapping("/eva/theme/type/questions/nature/inner_kpb/o_natures_list.jspx")
    public void eva_question_nature_list(Integer questionId, HttpServletRequest request,HttpServletResponse response, ModelMap model)throws Exception {
        JSONObject object = new JSONObject();
        Set<CmsEvaNature> set=cmsEvaQuestionMng.findById(questionId).getNatures();
        String natureIds="";
        for(CmsEvaNature natureId:set){
            natureIds+=natureId.getId()+",";
        }
        object.put("natureIds", natureIds);
        ResponseUtils.renderJson(response, object.toString());
    }

这样就实现了打开一个页面同时做了两件事，即与服务器进行两次交互