今天在項目中遇到了一個問題，就是在定義了一個函數drawHtml(),本意是想在函數運行結束後，返回拼接的字符串，可是函數運行結束後始終返回的是undefined

有BIG的代碼：

function drawHtml(){
        var html ="";
        $.ajax({
            type:‘get‘,
            url:‘http://localhost:63342/projectStudy/json/data.json‘,
            success:function(data){
                var dataList = data.peopleList;
                
 
for(var i=0;i<dataList.length;i++){
                   html+=`<p>姓名</p><p>${dataList[i].name}</p>
                            <p>年齡</p><p>${dataList[i].name}</p>`
                }
                console.log(html);//此處輸出的html是有值的
            }
        })
        console.log(html);
 
//返回的值為空
        return html;
    }

出現問題的原因：因為jquery的ajax是異步請求，在函數還沒有執行完ajax請求時，就已經return出來了html。所以輸出html是空值

解決方法：

function drawHtml(){
        var html ="";
        $.ajax({
            type:‘get‘,
            url:‘http://localhost:63342/projectStudy/json/data.json‘,
            async:false,//將異步的方法改為同步
            success:function
 
(data){
                var dataList = data.peopleList;
                for(var i=0;i<dataList.length;i++){
                   html+=`<p>姓名</p><p>${dataList[i].name}</p>
                            <p>年齡</p><p>${dataList[i].name}</p>`
                }
                console.log(html);//此處輸出的html是有值的
            }
        })
        console.log(html);//返回的值為空
        return html;
    }

這樣問題就解決了。

ajax異步傳輸數據，return返回值為空