jqueryeasyui-combobox下拉ajax实现

本文记录了如何使用jQuery EasyUI的ComboBox组件,通过AJAX从后台获取JSON数据。在JavaScript部分,通过POST方法发送请求,接收数据后填充ComboBox。在JSP页面上,定义ComboBox元素,并在页面加载时调用loadData函数。Java后端部分展示了如何处理请求,执行SQL查询并返回JSON数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这两天弄了个jqueryeasyui-combobox,这里小记一下我的前后台实现方式,:

 

js:

function loadData() {
   $.ajax({
    type : "POST",                                            // 使用post方法访问后台
    dataType : "json",                                        // 返回json格式的数据
    url: "platform/comboboxAction/getComboboxData",                                    // 要访问的后台地址
    data : {
           "classId": "8a58ab44419c341d01419c5595580027"
        },
    complete : function() {},
    success : function(result) {// result为返回的数据
     $('#ccdatabase').combobox({
      data : result,
      valueField:'TEMPLATE_CODE',
      textField:'TEMPLATE_NAME'
     });
    }
    
   });
  }

jsp:

<body onload="loadData()">

<select id="ccdatabase" class="easyui-combobox" name="state" style="width:200px;">
 </select>

 

java:

 

package avicit.km.module.combobox.action;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/comboboxAction")
public class ComboboxAction{
 
 @Autowired(required=true)
    private JdbcTemplate jdbcTemplate;
 
 @RequestMapping("/getComboboxData")
 public void getComboboxData (HttpServletRequest request, HttpServletResponse response) {
  Object classId = request.getParameter("classId");
  String sql = "select t.template_code, t.template_name from km_template t where t.class_id=?";
  List list = jdbcTemplate.queryForList(sql, new Object[]{classId});
  JSONArray ja = new JSONArray(list);
  System.out.println("parameter="+classId);
  System.out.println("ja.toString()="+ja.toString());
  response.setCharacterEncoding("utf-8");//指定为utf-8 
  try {
   response.getWriter().write(ja.toString());//转化为JSOn格式
  } catch (IOException e) {
   e.printStackTrace();
  }
 }
 
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值