当前位置: 移动技术网 > IT编程>网页制作>CSS > bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析

bootstrap搜索建议插件suggest+使用FastJSON进行JSON和String转换解析

2019年06月12日  | 移动技术网IT编程  | 我要评论

上图:

\

先发一下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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网