標籤：aos near lang 需要 doc 處理 btn linear 參數
ajax在前後端的互動中應用非常廣泛，通過請求後台介面接收處理json格式資料展現在前端頁面。
下面我們來簡單用 ajax在本地做一個接收並處理json的小例子
首先我們要建立一個叫做data的json檔案data.json。
data.json檔案內容是：
[
{"name":"小明","sex":"男","address":"北京","job":"web前端工程師"}
]
，我們要實現單擊 圖中點擊按鈕通過ajax取到data.json檔案中的資料並處理完成顯示在頁面中。
頁面代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax</title> 6 <style> 7 *{margin:0;padding:0px;font-size: 12px;} 8 a{text-decoration: none;} 9 ul{list-style: none;}10 #box{width:500px;margin:20px auto;}11 .btn{display:block;width:50px;height:50px;margin:20px auto;line-height: 50px;text-align: center;border:1px #000 solid;color:#000;transition:.3s linear;}12 .btn:hover{background: #000;color:#fff;font-weight: bold;}13 #con{margin-top:20px;}14 #con li{line-height: 30px;text-align: center;}15 </style>16 <script src="jquery-1.8.3.min.js"></script>17 <script>18 $(function(){19 $(‘.btn‘).on(‘click‘, function(){20 $.ajax({21 type: "POST", //請求的方式，也有get請求22 url: "data.json", //請求地址，後台提供的,這裡我在本地自己建立了個json的檔案做例子23 data: {name:name},//data是傳給背景欄位，後台需要哪些就傳入哪些24 dataType: "json", //json格式，後台返回的資料為json格式的。25 success: function(result){26 var dataObj = result, //返回的result為json格式的資料27 con = "";28 $.each(dataObj, function(index, item){29 con += "<li>姓名："+item.name+"</li>";30 con += "<li>性別："+item.sex+"</li>";31 con += "<li>現居地："+item.address+"</li>";32 con += "<li>崗位："+item.job+"</li>";33 });34 console.log(con); //可以在控制台列印一下看看，這是拼起來的標籤和資料35 $("#con").html(con); //把內容入到這個div中即完成36 } 37 })38 })39 })40 </script>41 </head>42 <body>43 <div id="box">44 <a class="btn" href="javascript:;">點擊</a>45 <ul id="con"></ul>46 </div>47 </body>48 </html>
$.ajax中的url參數地址是後台提供的介面連結地址。
data是需要傳給後台開發人員的標識名稱，方便後台根據名稱在資料庫中尋找到需要的資料並返回json格式的資料給前端。相同網域名稱下dataType: ‘json‘，不同網域名稱下也就是跨域請求需要用dataType: ‘jsonp‘
請求成功後把資料通過$.each遍曆輸出。
jquery ajax詳情參數用法可以自行百度搜尋。
ajax接收遍曆處理json格式資料
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
