方法一:
页面
<input type="hidden" id="classpath" value="${pageContext.request.contextPath }"/> <div id="div"> <form id="userForm"> <span>搜索用户:<input type="text" id="text_input" name="userName" value=""/> 输入后自动搜索</span> </form> <div id="usersdiv"> <ul> </ul> </div> </div>
遍历数组
//点击text事件 $(function(){ function text_input_sousuo(){ var classpath = $("#classpath").val(); var userName = $("#text_input").val(); var usersdiv = $("#usersdiv ul"); var text = ""; //ajax $.ajax({ type:"Post", data:{"userName":userName},//传入的参数 dataType:"json",//接收回来是数组 url:classpath+"/getUserByAllJson", success:function(data){ $.each(data.users,function(i){ text+="<li>"+data.users[i].userName+"</li>"; }); usersdiv.html(text); var usersli = $("#usersdiv ul li"); usersli.css({"float":"left","border":"1px solid #cccccc","height":"28px", "width":"60px","margin":"10px","background-color":"#efefef","cursor":"pointer" }); usersli.on("click",function(){ $("#text_input").val($(this).html()); usersdiv.empty(); }); } }); }; $("#text_input").on("keyup",function(){ text_input_sousuo(); }); $("#text_input").on("focus",function(){ text_input_sousuo(); });
strust文件
<package name="users" extends="json-default" namespace="/"> <action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction"> <result type="json"> <param name="includeProperties">users.*</param> </result> </action> </package>
方法二:用getJSON来做(思路)
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
<package name="users" extends="json-default" namespace="/"> <action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction"> <result type="json"> <param name="root">users</param> </result> </action> </package>