ajax json 使用

java1234官网

废话不说了，直接上代码示例吧

jsp页面：

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 <title>Insert title here</title>
 7 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 8 <script type="text/javascript">
 9     function ajaxChangePeopele(){
10         $.post("changePeople",{currentPeople:$("#v").val()},
11              function(data){
12                 $("#v").val(data);
13             }
14         );
15     }
16     
17     function selectType2(){
18         $.post("type",{fid:$("#type1").val()},
19             function(data){
20             var type2 = $('#type2');
21             type2.html('<option value="0">---请选择二级---</ooption>');
22             //alert(data);
23             var json=eval("[{'id':'4','name':'学院简介'}, {'id':5,'name':'组织机构'},{'id':'6','name':'师资队伍'}, {'id':'7','name':'学科建设'}]");
24             console.log(json);
25             $.each(json, function(i,v){
26                 alert("这里执行了");
27                 alert(v);
28                 alert(v.id+":"+v.name);
29                 type2.append("<option value='"+v.id+"'>"+v.name+"</option>");
30             });
31         }
32         );
33     }
34 </script>
35 </head>
36 <body>
37 Jquery Ajax测试<br/>
38 当前人：<input type="text" id="v" value="张三"/><br/>
39 <input type="button" value="Ajax请求后台换人" onclick="ajaxChangePeopele()"/>
40 <br/>
41 <hr>
42     <select name="type1" id="type1" onchange="selectType2(this.value)">
43         <option value="0">---请选择一级---</option>
44         <option value="1">学院概况</option>
45         <option value="2">计划总结</option>
46     </select>
47 
48     <select name="type2" id="type2">
49         <option value="0">---请选择二级---</option>
50     </select>
51     
52 </body>
53 </html>

运用到项目中的时候按照data的格式来写

list1.add("{'id':'"+type.getId()+"','name':'"+type.getName()+"'}");

 

posted @ 2013-08-04 10:12  李鬼989  阅读(181)  评论(0)  编辑  收藏  举报