JS调用后台数据查询，让查询到的数据在下拉列表里显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS调用后台数据查询，让查询到的数据在下拉列表里显示相关的知识，希望对你有一定的参考价值。
画面上有一个text文本框，一个下拉列表
在文本框里输入一个数据，由后台执行SQL语句，通过数据查询得到一个结果集，list类型的
画面上不点任何按钮的情况下，把查询出的结果集显示在下拉列表里
本人感觉能用JS实现，但JS一点都不会，跪求高手能把详细代码发给我，十分感谢
* @author zhou2003737
* @date 2014/09/25 16:39
*/
<html doctype="html">
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
//获取文本框对象
var searchText = document.getElementById("searchText");
//获取提交button对象
var action = document.getElementById("action");
//获取要增加到的下拉列表对象
var selections = document.getElementById("selections");
//点击提交的时候执行的方法
action.onclick = function()
//如果文本框对象中值不为空
if(searchText.value )
//根据文本框中的值循环5次
for(var i =5;i>0;i--)
//设置下拉列表中的值的属性
var option = document.createElement("option");
option.value = searchText.value + i;
option.text= searchText.value+i;
//将option增加到下拉列表中。
selections.options.add(option);
//思路如上。你可以将点击时将文本框中值传到后台，后台返回数据后，在将数据存入下拉列表对象中。
</script>
</head>
<body>
<p><input type="text" placeholder="请输入查询对象" autofocus id="searchText"/></p>
<p><input type="button" id="action" value="提交"/></p>
<p><select id="selections">
</select></p>
</body>
</html>追问
在文本框上入力一个值，正常情况下入力的值是后台查询SQL的一个参数，返回一个结果集，结果集显示在下拉列表中。但我想要的效果是在文本框上入力一个值，画面上任何按钮都不点击，结果集就能显示下拉列表中
就好像二级联动那样
你不执行action如何知道何时要和后台交互呢？也就是说，你如何才能判断你输入完成？何时向后台提交？2级联动是在selection上面操作，他有change事件。当然text也有change事件，但是这样的话会有很多无用的请求啊。
ps:以上代码的 申明有误，刚看出来。应该是
首先自定义一个ajax获取要显示在html页面上的数据的方法，例如方法getdata,这个方法把获取的返回值，通过js动态的显示到html页面要显示的区域，然后再写一个js定时器来实现实时调用数据，
示例：
<script>
//定时器 异步运行
function hello()
alert("hello");
var t2 = window.setTimeout("hello()",3000); //定时器
//window.clearTimeout(t2);//去掉定时器
</script>
把里面的hello方法换成你ajax获取数据的方法名，然后改下定时器里面的方法名和时间，这里设置的是3秒钟执行一次可以设置成你自己要的数据，就实现了你要的页面实时调用数据了。
select2的使用(ajax获取数据)
最近项目中用到了select2来做下拉框，数据都是通过ajax从后台获取, 支持动态搜索等。
使用到的下拉框分有两种情况：
一种是直接发送ajax请求渲染列表；另一种因为查询回的数据有六万多条，导致整个页面卡顿，所以采用的是先让用户至少输入3个字以后再动态模糊查询数据。
基本的使用方法看官方文档就可以明白，但是在做模糊查询的时候遇到了一些问题，在此记录一下。
第一种情况的下拉框，先是封装了函数获取数据，并拼接了列表模版，然后设置templateSelection即可。
function getProvinceList(ele) { var proList = ‘<option value="-1">--省--</option>‘ $.ajax({ type:‘get‘, contentType:‘application/json;charset=utf-8‘, url: dicUrl + ‘queryTwoLayerAddress‘, dataType:‘json‘, success: function(res) { if(status == 00) { var resArr = res.data for( var i = 0; i < resArr.length; i++) { proList += ‘<option value = ‘+ resArr[i].code +‘>‘+ resArr[i].codeText +‘</option>‘ } ele.html(proList) } } }) }
$(‘#bankName‘).select2({ minimumInputLength:3, id: function(data) { //把[{id:1, text:"a"}] 转换成[{data.id:1, data.codeText:"a"}], 因为后台返回的数据是[{id:1, codeText:"a"}] return data.id }, // text: function(data) {return data.codeText}, //不生效 formatSelection: function (data) { return data.codeText }, //生效 ajax: { type:‘get‘, url: function(params){ return dicUrl + ‘query/bankCode/‘+ params.term }, dataType:‘json‘, data: function(params) { //输入的内容 return { text:params.term, } }, processResults: function (data, page) { //data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] }; var array = data.data; var i = 0; while(i < array.length){ array[i]["id"] = array[i][‘code‘]; array[i]["text"] = array[i][‘codeText‘]; delete array[i]["ItemId"]; delete array[i]["ItemText"]; i++; } return { results: array }; }, cache: true, }, placeholder:‘请选择银行名称‘, escapeMarkup: function(markup) { //提示语 return markup }, templateResult: formatRepo, templateSelection: formatRepoSelection }); function formatRepo (repo) { if (repo.loading) { return repo.text; } var markup = "<div class=‘select2-result-repository clearfix‘>" + "<div class=‘select2-result-repository__meta‘>" + "<div class=‘select2-result-repository__title‘>" + repo.codeText + "</div>"; if (repo.description) { markup += "<div class=‘select2-result-repository__description‘>" + repo.description + "</div>"; } return markup; } function formatRepoSelection (repo) { return repo.text; }
[{id:1,text:"a"},{id:2,text:"b"}, ...].//source code
* @param options.results a function(remoteData, pageNumber, query) that converts data returned form the remote request to the format expected by Select2. * The expected format is an object containing the following keys: * results array of objects that will be used as choices * more (optional) boolean indicating whether there are more results available * Example: {results:[{id:1, text:‘Red‘},{id:2, text:‘Blue‘}], more:true}
源码中在ajax的success函数中回调ajax.results
//source code
success: function (data) { // TODO - replace query.page with query so users have access to term, page, etc. // added query as third paramter to keep backwards compatibility var results = options.results(data, query.page, query); query.callback(results); }
其实ajax.results是把请求回的数据在传递给query.callback之前先格式化成 [{id:a,text:"a"},{id:b,text:"b"}, ...]。
//source code
callback: this.bind(function (data) { // ignore a response if the select2 has been closed before it was received if (!self.opened()) return; self.opts.populateResults.call(this, results, data.results, {term: term, page: page, context:context}); self.postprocessResults(data, false, false); if (data.more===true) { more.detach().appendTo(results).html(self.opts.escapeMarkup(evaluate(self.opts.formatLoadMore, self.opts.element, page+1))); window.setTimeout(function() { self.loadMoreIfNeeded(); }, 10); } else { more.remove(); } self.positionDropdown(); self.resultsPage = page; self.context = data.context; this.opts.element.trigger({ type: "select2-loaded", items: data }); })});
query.callback则处理一些逻辑，确保下拉框选项被选中时触发 .selectChoice。
//source code
selectChoice: function (choice) { var selected = this.container.find(".select2-search-choice-focus"); if (selected.length && choice && choice[0] == selected[0]) { } else { if (selected.length) { this.opts.element.trigger("choice-deselected", selected); } selected.removeClass("select2-search-choice-focus"); if (choice && choice.length) { this.close(); choice.addClass("select2-search-choice-focus"); this.opts.element.trigger("choice-selected", choice); } } }
因此，如果results格式错误，就会导致在执行.selectChoice的时候.select2-search-choice-focus不能被添加到DOM元素上（会导致点击选项以后，选项并不会被选中）
解决方案:
results: function (data, page) {
//data = { results:[{ItemId:1,ItemText:"a"},{ItemId:2,ItemText:"b"}] };
var array = data.results;
var i = 0;
while(i < array.length){
array[i]["id"] = array[i][‘ItemId‘];
array[i]["text"] = array[i][‘ItemText‘];
delete array[i]["ItemId"];
delete array[i]["ItemText"];
i++;
}
return { results: array };
}
也可以手动更改对象的属性名.
select.js是这么处理的的
//source code
id: function (e) { return e == undefined ? null : e.id; }, text: function (e) { if (e && this.data && this.data.text) { if ($.isFunction(this.data.text)) { return this.data.text(e); } else { return e[this.data.text]; } } else { return e.text; } },
所以，我们只要添加函数就可以覆盖默认的对象属性名了。
$(‘#mySelect‘).select2({
id: function (item) { return item.ItemId },
// text: function (item) { return item.ItemText }, //not work
formatSelection: function (item) { return item.ItemText } //works
});
另一个遇到的问题就是语言本地化。
发现直接引入语言包并不生效，所以直接使用函数改写了提示语言。
以上是关于JS调用后台数据查询，让查询到的数据在下拉列表里显示的主要内容，如果未能解决你的问题，请参考以下文章
后台封装成jsonarray，前台js如何接收并存储到下拉列表中，急急急。。。
java后台对查询到的商品列表按店铺分组并返回json数据_新手学习
在后台使用 mysql 数据库的 Spring 应用程序的 ICD 10 下拉列表