jQuery.js(Ajax)的使用
今天咱們講一下使用ajax獲取外部數據，直接渲染到html頁面當中。
參數
url,[settings]一個用來包含發送請求的URL字符串。
settings:AJAX 請求設置。所有選項都是可選的。
settings:選項
accepts默認： 取決於數據類型。
內容類型發送請求頭，告訴服務器什么樣的響應會接受返回。如果accepts設置需要修改，推薦在$.ajaxSetup()方法中做一次。
contents
一個以"{字符串:正則表達式}"配對的對象，用來確定jQuery將如何解析響應，給定其內容類型。
1.首先要到官網下載jQueruy，如圖：
下載最新版本：jQuery3.1.1版本
2.開始安裝吧，安裝完成后把jQuery文件放到怎么的js目錄下，現在開始寫代碼了，今天要弄的是一個獲取學生信息的數據的表格，下圖是HTML的代碼：
<table class="xinxi">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>花花</td>
<td>13</td>
<td>女</td>
</tr>
</table>
3.這是css部分的代碼;
.xinxi{
margin: 50px auto;
border-collapse: collapse;
width: 500px;
}
.xinxi td,th{
border: 1px solid #ccc;
text-align: center;
}
到這我們會看到我們的頁面已經有效果了：
4.現在我們開始js部分也是實現我們的ajax外部獲取的重要部分，在之前我們先要弄一個外部存儲數據的文件格式如下：
[
{"nenm":"呵呵","age":18,"sex":"男" },
{"nenm":"花花","age":12,"sex":"nv" },
{"nenm":"lele","age":15,"sex":"女" },
{"nenm":"呵呵","age":18,"sex":"男" },
{"nenm":"花花","age":12,"sex":"nv" },
{"nenm":"lele","age":15,"sex":"女" },
{"nenm":"呵呵","age":18,"sex":"男" },
{"nenm":"花花","age":12,"sex":"nv" },
{"nenm":"lele","age":15,"sex":"女" }
]
5.這就js的代碼
$.ajax({
url: "http://192.168.64.69:8000/student.json",
success: function(data){
var datas=data;
for (var i = 0, l = datas.length;i<l;i++) {
var dat=datas[i];
var trstr="<tr><td>"+dat.nenm+"</td><td>"+dat.age+"</td><td>"+dat.sex+"</td></tr>";
$(".xinxi").append(trstr);
}
}
});
到這里咱們想要的頁面效果已經出來了：
