Javascript_Ajax学习_Django后端

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==false; //IE
    }
    var xhr=new XMLHttpRequest(); //新建XMLHttpRequest对象

    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 = $(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);
            }
        }
    });
});