1. 程式人生 > >怎麼使用jquery中ajax來獲取資料,

怎麼使用jquery中ajax來獲取資料,

好久沒有寫雞湯了,真的是三天不要學習,就不學習了,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就是遍歷這個物件。