Django和前端用ajax传输json等数据

2019-08-13 08:33:49来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

需要传输的是下图中所有的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");

 



 


原文链接:https://www.cnblogs.com/pozhu15/p/11328509.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:python3基础之“小练习(3)”

下一篇:python 之 前端开发(HTTP协议、head标签、img标签、a标签、列表