bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析
程序员文章站
2022-10-02 17:16:45
上图:
先发一下json格式:
{
"message": "",
"value": [
{...
上图:
先发一下json格式:
{ "message": "", "value": [ { "username": "name1", "shortaccount": "aaa", "userid": "111" }, { "username": "name2", "shortaccount": "bbb", "userid": "222" }, { "username": "name3", "shortaccount": "ccc", "userid": "333" }, { "username": "name4", "shortaccount": "ddd", "userid": "444" } ], "code": 200, "redirect": "" }
前端:
引入:
<script src="/static/js/jquery.min.js"></script><script src="/static/js/bootstrap.min.js"></script><script src="/static/js/bootstrap-suggest.js"></script>
正文:
js:
(function() { /** * 测试(首次从 url 获取数据) */ function inittest() { $("#test").bssuggest('init', { /*url: "/rest/sys/getuserlistkeyword=", effectivefields: ["username", "email"], searchfields: [ "shortaccount"], effectivefieldsalias:{username: "姓名"},*/ clearable: true, url: "jsontest", idfield: "userid", keyfield: "username" }).on('ondatarequestsuccess', function (e, result) { console.log('ondatarequestsuccess: ', result); }).on('onsetselectvalue', function (e, keyword, data) { console.log('onsetselectvalue: ', keyword, data); }).on('onunsetselectvalue', function () { console.log('onunsetselectvalue'); }).on('onshowdropdown', function (e, data) { console.log('onshowdropdown', e.target.value, data); }).on('onhidedropdown', function (e, data) { console.log('onhidedropdown', e.target.value, data); }); } //按钮方法事件监听 $('#methodtest button').on('click', function() { var method = $(this).text(); var $i; if (method === 'init') { inittest(); } else { $i = $('#test').bssuggest(method); if (typeof $i === 'object') { $i = $i.data('bssuggest'); } console.log(method, $i); if (!$i) { alert('未初始化或已销毁'); } } if (method === 'version') { alert($i); } }); inittest(); /** * 测试(首次从 url 获取数据,显示 header,不显示按钮,忽略大小写,可清除) */ $("#testnobtn").bssuggest({ url: "jsontest", /*effectivefields: ["username", "shortaccount"], searchfields: [ "shortaccount"],*/ effectivefieldsalias:{username: "姓名", userid:"id", shortaccount:"参数"}, ignorecase: true, showheader: true, showbtn: false, //不显示下拉按钮 delayuntilkeyup: true, //获取数据的方式为 firstbyurl 时,延迟到有输入/获取到焦点时才请求数据 idfield: "userid", keyfield: "username", clearable: true }).on('ondatarequestsuccess', function (e, result) { console.log('ondatarequestsuccess: ', result); }).on('onsetselectvalue', function (e, keyword, data) { console.log('onsetselectvalue: ', keyword, data); }).on('onunsetselectvalue', function () { console.log("onunsetselectvalue"); }); //禁用表单提交 $("form").submit(function() { return false; }); //版本切换 $('#bsversion button').on('click', function() { var ver = $(this).data('version'); $('#bscss').attr('href', '//cdn.bootcss.com/bootstrap/' + ver + '/css/bootstrap.min.css'); $('#bsjs').attr('src', '//cdn.bootcss.com/bootstrap/' + ver + '/js/bootstrap.min.js'); }); }());
后端:
用的springm+fastjson
controller:
@responsebody @requestmapping(value="/jsontest") public string jsontest() { data data = new data(); setuser(data); string str = json.tojsonstring(data); return str; } //模拟数据 public static void setuser(data data){ data.setredirect(""); data.setcode("200"); data.setmessage(""); list list = new arraylist(); list.add(new value("name1","aaa","111")); list.add(new value("name2","bbb","222")); list.add(new value("name3","ccc","333")); list.add(new value("name4","ddd","444")); data.setvalue(list); }
data类:
public class data { private string redirect; private string code; private string message; private list value; public string getredirect() { return redirect; } public void setredirect(string redirect) { this.redirect = redirect; } public string getcode() { return code; } public void setcode(string code) { this.code = code; } public string getmessage() { return message; } public void setmessage(string message) { this.message = message; } public list getvalue() { return value; } public void setvalue(list value) { this.value = value; } }
value类:
public class value { private string username; private string shortaccount; private string userid; public string getshortaccount() { return shortaccount; } public void setshortaccount(string shortaccount) { this.shortaccount = shortaccount; } public string getuserid() { return userid; } public void setuserid(string userid) { this.userid = userid; } public string getusername() { return username; } public void setusername(string username) { this.username = username; } public value(string username, string shortaccount, string userid) { super(); this.username = username; this.shortaccount = shortaccount; this.userid = userid; }
fastjson与bean之间转换
@test public void jsont1() { data user = new data(); //设置参数 setuser(user); // 将javabean转成json system.out.println("将javabean转成json"); string str = json.tojsonstring(user); system.out.println("fastjson转换后" + str); // 将json转成java bean system.out.println("将json转成java bean"); jsonobject ob1 = jsonobject.parseobject(str); jsonarray trans_result1 = (jsonarray) ob1.get("value"); jsonobject trans_result_content1 = (jsonobject) trans_result1.get(0); system.out.println(ob1); system.out.println(ob1.get("value")); system.out.println(trans_result_content1); system.out.println(trans_result_content1.get("username")); } //设置参数用 public static void setuser(data user){ user.setredirect(""); user.setcode("200"); user.setmessage(""); list list = new arraylist(); list.add(new value("aaa")); list.add(new value("bbb")); list.add(new value("ccc")); list.add(new value("ddd")); user.setvalue(list); }
输出结果:
将javabean转成json fastjson{"code":"200","message":"","redirect":"","value":[{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}]} 将json转成java bean {"redirect":"","code":"200","message":"","value":[{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}]} [{"username":"aaa"},{"username":"bbb"},{"username":"ccc"},{"username":"ddd"}] {"username":"aaa"} aaa