`

grails通过Ajax实现Select的标签的无刷新级联

阅读更多
功能描述:
在grails通过选择select不同的option,通过Ajax查询数据库中的值,返回Json类型的结果,实现页面标签的无刷新级联。
1.页面代码,在id为selectQuyu不同的选择返回不同的值到id为selectChangjia的select中。
<select id="selectQuyu"  onchange ="setChanjia(this.options[this.selectedIndex].value)">
                            <option value="-1" selected="true">全部集团</option>
                            <option value="1">红塔集团</option>  
                            <option value="2">红烟集团</option>
                            <option value="3">红云集团</option>  
                            <option value="5">其它</option>    
                        </select>&nbsp;&nbsp;&nbsp;&nbsp;  

                        <select id ="selectChangjia">      
                            <option selected="true">全部厂家</option>  
                        </select>&nbsp;&nbsp;&nbsp;&nbsp;

2.js进行处理,导入prototype类库,发送Ajax异步请求,获得返回的json类型的值,然后加入到id为selectChangjia的select中。
<g:javascript library="prototype" />
        <script language="JavaScript" type="text/javascript">
          function setChanjia(jituan){
            var baseUrl = "${createLink(controller:'csfx', action:'getJson')}"
            var url = baseUrl + "?combineid=" +(jituan)
            alert(url)
            new Ajax.Request(url, {
              method: 'get',
              asynchronous: true,  
              onSuccess:function(req) {update(req.responseText, 'changjiaMess')}
            })   
          }  
            
          function update(json, mess){
              var cjxx = eval( "(" + json + ")" )
              //删除所有的值
              document.getElementById("selectChangjia").options.length=0;
              document.getElementById("selectChangjia").options.add(new Option('全部厂家','-1')); 
              for(var i = 0;i<cjxx.length;i++){
                var changJiaText = cjxx[i].CHANGJIA;   
                var changJiaValue = cjxx[i].CHANGJIAID;       
                document.getElementById("selectChangjia").options.add(new Option(changJiaText,changJiaValue));
              }  
          }  
        </script>

3.controllor中的处理,通过传入的id好进入数据库进行查询,然后返回json结果。
def getJson ={
//处理已经遗留的数据库
Sql sql = new Sql(dataSource)
        def com_id = params.combineid
        def changjiaStr = " select distinct(t.produce_factory) as changjia,t.factory_id as changjiaid from dim_tel_sale_cigarette t "
        if(com_id!=null&&com_id!="-1"){
            changjiaStr =changjiaStr+"where t.combine_id = "+com_id
        }   
        println changjiaStr
        def changJiaArr = sql.rows(changjiaStr)
        //处理乱码问题
        changJiaArr.each{
            it.CHANGJIA = new String((it.changjia).getBytes("ISO-8859-1"),"gb2312")
        }   
  
        render changJiaArr as JSON        
    }
分享到:
评论

相关推荐

    grails ajax

    Ajax(Asynchronous JavaScript and XML)技术则是Web开发中用于实现页面无刷新、局部更新的一种重要手段。在Grails中,Ajax可以与JavaScript紧密集成,极大地提升了用户体验。 标题"grails ajax"表明我们将探讨...

    grails 使用ajax的例子

    在Grails框架中,Ajax是一种常用的前端技术,用于实现页面的部分刷新,提高用户体验。本教程将深入探讨如何在Grails应用中使用Ajax,通过几个实际的例子来帮助理解其工作原理和常见用法。 1. **Ajax简介** Ajax...

    精通 Grails 使用 Ajax 实现多对多关系

    比如,当我们创建或编辑书时,可以通过Ajax请求动态加载已存在的作者列表,用户可以选择多个作者,而无需刷新整个页面。这可以使用jQuery或其他Ajax库来实现,通过异步发送请求,获取和显示数据。 在实际应用中,多...

    Ajax实现产品无刷新修改

    总结起来,使用Ajax和Grails实现产品无刷新修改涉及到前端JavaScript的事件监听和Ajax请求,以及后端Grails控制器的处理和数据库交互。这种技术提高了用户体验,减少了不必要的页面刷新,使得产品管理更加高效流畅。...

    精通Grails 之用 JSON 和Ajax 实现异步Grails(pdf电子书)

    ### 精通Grails之用JSON和Ajax实现异步Grails #### 一、引言 随着Web 2.0技术的发展,JSON (JavaScript Object Notation) 和 Ajax (Asynchronous JavaScript + XML) 成为现代Web应用开发的重要组成部分。本文旨在...

    Grails标签

    Grails标签 主要介绍了grails的标签的一个帮助文档

    Grails 下拉框联动最优实现

    在Grails中,我们可以利用AJAX技术实现这种交互,AJAX即异步JavaScript和XML,它允许页面在不刷新整个页面的情况下与服务器交换数据并局部更新页面内容。这正是实现联动效果的关键,因为它能让用户体验更加流畅,...

    Ajax Development With Grails Dojo

    通过学习《Ajax Development With Grails Dojo》,你可以实现以下目标: - **了解如何开始**:从安装Grails和Dojo开始,到搭建开发环境。 - **理解Grails对Ajax的支持**:掌握Grails提供的特定标签和其他机制,了解...

    Grails 中文参考手册

    - **创建Grails应用**:通过命令行工具,你可以快速生成一个新的Grails应用结构。 - **Hello World**:这是一个简单的示例,展示如何创建一个显示“Hello World”的基本应用。 - **使用IDE**:Grails支持多种集成...

    grails实现分页技术

    在Grails这个基于Groovy的敏捷开发框架中,实现分页功能对于任何Web应用程序都是至关重要的,特别是当处理大量数据时。Grails提供了一些内置的支持,但如果你需要在自定义的控制器和视图中实现分页,那么就需要遵循...

    the definitive guide to grails 2

    通过Ajax,Web应用可以实现无刷新的数据更新,提高了用户交互性和应用响应速度。 #### GORM(Grails Object Relational Mapping) GORM是Grails框架的ORM组件,它提供了面向对象的方式进行数据库操作。GORM支持...

    grails 文档

    Grails 支持多语言环境,通过i18n资源文件,轻松实现应用的国际化和本地化。 11. **模板引擎与标签库** GSP(Groovy Server Pages)支持自定义标签库,使得视图层逻辑更加清晰,同时提供了内置的标签,如`g:form`...

    使用 Grails 快速开发 Web 应用程序

    在了解了Grails的基本结构后,可以通过创建简单的控制器和领域类来实现基本功能。例如,创建一个用于联系人管理的控制器和领域类,处理CRUD操作。Grails的自动化工具如GORM(Grails Object-Relational Mapping)将...

    Grails Grails Grails

    通过阅读这份文档,开发者可以深入理解Grails 1.1的核心特性和开发流程,从而更好地利用Grails构建高效、健壮的Web应用。 总结来说,Grails 是一个强大的Web开发框架,借助Groovy的灵活性和Java生态的稳定性,为...

    Grails权威指南

     11.2 通过集成hibernate实现orm  11.2.1 使用hibernatecxml映射  11.2.2 ejb3方式的映射  11.2.3 在pojo实体中使用约束  11.2.4 得到sessionfactory对象  11.3 使用spring进行依赖注入  ...

    Grails权威指南.pdf

    - **AJAX in Grails**:书中会介绍如何使用jQuery或其他库实现异步更新,提升用户体验。 - **Remote Function Calls (RFC)**:通过AJAX调用控制器的方法,实现页面部分更新。 6. **Java平台集成**: - **...

    grails-用户手册

    Grails支持多语言环境,通过`messages.properties` 文件实现国际化,可以根据用户浏览器设置自动选择对应的语言版本。 总结来说,《Grails用户手册》涵盖了从项目创建到部署运行的全过程,包括Grails的基础概念、...

    学生管理系统课程设计(grails)

    例如,可以创建一个`student_list.gsp`页面,展示所有学生信息,并通过AJAX实现无刷新的查询和分页功能。 五、查询功能与安全性 查询功能通常通过控制器(Controllers)实现,它们接收用户的请求,调用服务层...

    grails中文入门简介

    验证是Web开发中不可或缺的一部分,Grails通过声明约束和验证约束来实现。它支持客户端验证,使得可以在用户提交表单之前校验数据。Grails的国际化支持非常好,开发者可以通过简单的配置来为不同的语言环境定制应用...

    grails快速开发web

    - **实战技巧**:包括 GORM (Groovy Object Relational Mapping) 的使用、如何在 Grails 中实现 Ajax 功能、处理遗留数据库的方法、利用遗留框架以及如何在 Grails 中使用 WebFlow。 - **高效编程系列**:涵盖使用 ...

Global site tag (gtag.js) - Google Analytics