Django和前端用ajax傳輸json等數據

需要傳輸的是下圖中所有的input中客戶端設置的數據

整個頁面是用js生成，代碼不長，但是用了許多拼接，看起來開比較亂，頁面的核心就是下面的部分，有一些關鍵參數部分就不放了，可以跳過這個

下面開始重點，將表單中的數據以json在ajax發送給后端

function btnChange(values) {
    var argList=["xxx","xxx","xxx",,
       // 。。。這里的關鍵參數刪了
        ];  
    var dict = {}; 
    for (var i=0;i<argList.length;i++)
    {
        dict[argList[i]+"qxl"]=$("input[name="+argList[i]+"qxl]").val();
        dict[argList[i]+"kkx"]=$("input[name="+argList[i]+"kkx]").val();
    } 
    console.log(dict); 
    
    $.ajax({
        beforeSend : function(XMLHttpRequest){
            //XMLHttpRequest.setRequestHeader("aadfasdfsdfasdsasasdcccc","ajax");
        },

        url:"/visualPage/getWarningSet/",
        type: "POST",
        dataType: "json",
        data:dict,
        complete: function (data) {
         //console.log('aaa')
        },
        success:function(data){
            console.log(data);
           // window.open("/visualPage/returnWarning","","width=800,height=600");
            // $(".text").text(data.message);
        },        
    });     
     console.log(values.name);   //slice(0,-3) 
    var warningshow=document.getElementById("warning");
    warningshow.style.display='block';

}

url為請求的地址，type提交類型(post,get等)，dataType這里用json表示提交的數據格式為json，
data這里是要提交的數據，以字典形式，success為服務器成功響應后要執行的函數，

這里的格式和,分割符一定要注意，格式不對不會發送成功

再看視圖里面

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def getWarningSet(request):
    if request.is_ajax():
        #print(request.POST)
        elename1=[
            "xxx","xxx","xxx",
            #這里省略關鍵參數
        ] 
        k=0
        while k<len(elename1):
            startArgsSet[elename1[k]]["qxl"]=request.POST.get(elename1[k]+'qxl', '')
            startArgsSet[elename1[k]]["kkx"]=request.POST.get(elename1[k]+'kkx', '')
            k+=1
        bxml=dicttoxml.dicttoxml(startArgsSet,custom_root='warning')
        xml=bxml.decode('utf-8')

        dom=parseString(xml)
        pxml=dom.toprettyxml(indent='   ')
        f=open(os.path.join(settings.BASE_DIR,'visualModule/xmlData/warning.xml'),'w',encoding='utf-8')
        f.write(pxml)
        f.close()
    return 'HTTP_'
　　

is_ajax()可以判斷是否是ajax請求，如果前段是用get來發送不用檢測

直接用request.POST.get（"json中的鍵值"）即可獲取對應數據

一般通過 return JsonResponse(name_dict)這樣來響應給前段數據，我這里沒有進行這一步，只返回了一個字符串

return 'HTTP_'，

這里是直接將數據轉換為xml存儲到服務器，只是為了序列化用戶的設置，會有別的視圖函數來專門解析xml到字典發送到前端，所以我使用ajax只是為了實時存儲用戶設置，並不會立即反饋給用戶。


ajax可以用來來傳輸json，字典，字符串，數組等格式的數據

下面是ajax另一種格式，比上面的格式簡化多了

$.get("/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret);
        })

還有JavaScript原生的用法，需要的可以自行選擇

 var xmlhttp;
    //創建ajax對象
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    
     //onreadystatechange 事件中的就緒狀態時執行的函數：
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            
            //xml
            xmlDoc=xmlhttp.responseXML;
            txt="";
            x=xmlDoc.getElementsByTagName("ARTIST");
            for (i=0;i<x.length;i++)
            {
                txt=txt + x[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("myDiv").innerHTML=txt;
        }
    }
    //向服務器發送請求
    xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");