Ajax交互之异步导入JSON数据

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>Ajax之异步导入JSON</title>
 8         <link rel="stylesheet" href="common.css" type="text/css" />
 9         <style type="text/css">
10             
11         </style>
12         <script src="jquery-1.5.2.js" type="text/javascript"></script>
13         <script type="text/javascript">
14             $(document).ready( function() {
15                 $('#submit').click(function(){
16                     $.ajax(
17                         {
18                             type:'GET',
19                             url:'drinkinfo.json',
20                             dataType:"json", //指明响应数据格式为JSON
21                             success: function(data) {
22                                 var drinks = '<ul>';
23                                 //data遍历的数据,i为index角标，v代表数据object
24                                 $.each(data, function(i, v){
25                                     drinks += '<li>' + v.text + '</li>';
26                                 });
27                                 drinks += '</ul>';
28                                 $('#message').append(drinks);
29                             }
30                         }
31                     )
32                 });
33             });
34         </script>
35     </head>
36     <body>
37         <input type="submit" id="submit" value="Import JSON Data From Remote Server" />
38         <div id="message"></div>
39     </body>
40 </html>

1 [
2 {"text":"tea", "value":"TEA"},
3 {"text":"coffee", "value":"COFFEE"},
4 {"test":"juice", "value":"JUICE"}
5 ]

posted on 2017-01-15 23:17 Sharpest 阅读(180) 评论(0) 编辑收藏举报