jqueryeasyui-combobox下拉ajax实现

最新推荐文章于 2021-08-06 19:39:50 发布

原创最新推荐文章于 2021-08-06 19:39:50 发布 · 7.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jqueryeasyuicombobox

JavaScript基础篇专栏收录该内容

16 篇文章

订阅专栏

本文记录了如何使用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：

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();
  }
}

}