首页 > 代码库 > Javascript_Ajax学习_Django后端

Javascript_Ajax学习_Django后端

2024-08-12 19:43:02   218人阅读

Django搭建的后端，学习Ajax，正好可以从后端看到数据，好好学习一下。

 

前端表单代码

<form method="POST" class="suggest"  id="formSuggest">    {% csrf_token %}    <div>        <h3>每一滴汗水的付出只为让每位用户赏心悦目，正如攀登的勇者，人生总在批判鼓励中进步，若您有任何看法，还请您提出宝贵的意见，以资进步，谢谢！</h3>        <textarea name="JobSuggest" placeholder="您的建议"></textarea>    </div>    <div class="btn">        <button type="button" name="empty">清空</button>        <input type="submit" name="put" id="form_sub" value="提交">    </div></form>

效果如图：

技术分享

 

后端代码

def test(request):    allSuggest=JobSuggest.objects.all()    allSuggest=allSuggest[::-1]    if request.method=="POST":        if request.is_ajax():   #貌似只对Jquery_Ajax有效            print(‘Ajax POST‘)        else:            print(‘Normal POST‘)           Suggest=request.POST[‘JobSuggest‘]        length=len(Suggest)        if length>0:            jobSuggest=JobSuggest.objects.create(Suggest=Suggest)            return HttpResponse(‘感谢您的建议！‘)        else:            return HttpResponse(‘请输入您的宝贵建议，谢谢！‘)    else:        return render(request, ‘test.html‘,{‘allSuggest‘:allSuggest})

 

 

一、原生JavaSCript_Ajax

GET请求不需要CSRF认证，POST请求需要正确认证才能得到正确的返回结果，一般在POST表单中加入{% csrf_token %}

<form method="POST" class="suggest"  id="formSuggest">    {% csrf_token %}    <div>        ......    </div></form>

1、使用Ajax时，若不POST任何数据，即xhr.send(null)，则需要请求头中添加“X-CSRFTOKEN”，如下

var form_sub=document.getElementById(‘form_sub‘);form_sub.onclick=function(e){    if(e.preventDefault){        e.preventDefault(); //阻止默认事件    }else{        window.event.returnValue=http://www.mamicode.com/=false; //IE>xhr.onreadystatechange=function(){        if(xhr.readyState===4){            if(xhr.status===200){                alert(‘Ajax 成功\n‘+ xhr.responseText );            }else{                alert(‘Ajax 失败\n‘+ xhr.responseText )            }        }    }    xhr.open(‘POST‘,‘/test/‘);    xhr.setRequestHeader({"X-CSRFToken",‘{{ csrf_token }}‘});    xhr.send(null);}

未加 xhr.setRequestHeader({"X-CSRFToken",‘{{ csrf_token }}‘});

技术分享

添加 xhr.setRequestHeader({"X-CSRFToken",‘{{ csrf_token }}‘});    ？？？不知为何页面会跳转。。。

 

 

技术分享

 

2、POST数据

var form_sub=document.getElementById(‘form_sub‘);form_sub.onclick=function(e){    if(e.preventDefault){        e.preventDefault();    }else{        window.event.returnValue==false; //IE    }    var request=new XMLHttpRequest(); //新建XMLHttpRequest对象    request.onreadystatechange=function(){        if(request.readyState===4){            if(request.status===200){                alert(‘Ajax 成功\n‘+request.responseText);            }else{                alert(‘Ajax 失败‘)            }        }    }    request.open(‘POST‘,‘/test/‘);    var form=document.getElementById(‘formSuggest‘);    request.send(new FormData(form)); //FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR 传输）提供了便利}

没有输入数据

技术分享

输入数据

技术分享

 

二、Jquery_Ajax

$.ajaxSetup({    data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ },});$(‘#formSuggest‘).submit(function(e){    e.preventDefault();    var data = http://www.mamicode.com/$(this).serialize(); //序列化   csrfmiddlewaretoken=qUIIM3BcCtzhAKiMKzW6thD1jqKS6fQ2&JobSuggest=%E5%A5%BD%E7%9A%84&submitName=put    $.ajax({        url:‘/test/‘,        type:‘POST‘,        traditional:true,        cache:false,        data:data,        success:function(arg){   //arg等于后端HttpResponse返回的数据            if (arg==‘感谢您的建议！‘) {                   alert(arg);             }else{                alert(arg);            }        }    });});

Javascript_Ajax学习_Django后端


联系
我们