怎麼使用jquery中ajax來獲取資料,
阿新 • • 發佈:2019-01-11
好久沒有寫雞湯了,真的是三天不要學習,就不學習了,1玩小時定律你懂的,直接說怎麼寫是做好的,直說最簡單的方式,】
【1】 我一般習慣幫專案放在php環境的www目錄下執行.如果知道php的都知道怎麼回事,還是來說怎麼安裝這個吧 ,
直接搜尋WampServer這個就會看到百度軟體中心,直接點選普通下載,下一部下一部的安裝即可。開啟,電腦又下角如果出現一個綠色的小標誌表示成功。我們可以點選它幫語言切換成中文,點選一個localhost的我們就是開啟一個視窗,預設是8080.如果你的埠被佔用可以修改配置檔案,但是新手來說還是直接把其他開啟的一些軟體先暫停了,這個就是執行正常。
這裡要記得剛才你是安裝在哪個目錄下的,找到www目錄,我們直接來寫程式碼。
以上說的都是廢話,正式的開始
在www目錄下建立資料夾demo,再在demo下面建立index.html和index.json檔案
josn檔案是用來模擬資料的。
index.html程式碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
<style>
.main{
width: 600px;
height : 500px;
background: #c8c8c8;
}
</style>
</head>
<body>
<input type="button" value="點選" />
<div class="main">
<ul>
</ul>
</div>
</body>
<script type="text/javascript">
$(function (){
$.ajax({
url: "index.json",
type: "post",
dataType: "json",
contentType: "application/json;charset=UTF-8",
beforeSend: function (xhr) {
},
success: function (response) {
var obj = response;
var html ="";
$.each(obj,function(index, el) {
html +='<li>'+el.title+'</li>'
});
$(".main").append(html);
}
})
});
</script>>
</html>
index.json檔案
[
{"title":"我們不一樣"},
{"title":"我如果你砍到這裡,你想知道樓主長什麼樣,告訴你,30多歲了, http://www.iqiyi.com/w_19ruwgagkh.html這個是樓主的視訊連結"},
{"title":"我的阿斯達歲的"}
]
josn需要滿足鍵值的格式,
我們開啟index.html檔案,頁面上就會有3條li.
就是這麼簡單
如果你剛才是在www下的demo 資料夾下的直接http://localhost/demo/index.html這樣開啟,如果你的檔案沒在伺服器下,那你直接正常開啟。
上面的都不要解釋了吧 append這個就是幫內容新增到想新增帶的容器中,each就是遍歷這個物件。