ajax Post数据，并得到返回结果
使用ajax Post数据到后台Server，并从后台返回数据给前端WEB：
urls.py:
from django.conf.urls import url from aptest import views as aptest urlpatterns = [ url(r'^$', aptest.index, name='index'), ]
编辑views.py，定义主页：
from django.views.decorators.csrf import csrf_exempt #导入csrf_exempt模块 @csrf_exempt #由于csrf机制，在此需要调用该装饰函数，否则在ajax post数据的时候会提示403 forbiddon。如果通过form序列化（serialize）的方式post数据，则无需调用该装饰函数
@login_req() //要写在csrf_exempt下面，否则不使用form序列化的方式ajax post数据时会提示403 forbiddon
def index(request): #主页 print request.method a=request.POST.get('a') b=request.POST.get('b') print a,b if a is not None and b is not None: ret=int(a)+ int(b) return HttpResponse(str(ret)) #执行到此处，后面的代码不会再继续执行 context={} return render(request,'aptest/index.html',context)
编辑模板index.html:
在其form中定义action值，指向当前页面，则在ajax post data时无需再定义url，默认将把数据提交到当前页面。
{% extends "base.html" %} {% block title %}aptest index{% endblock %} {% block content %} <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/static/jQuery/index.js"></script> <!--应用的js脚本文件--> <p>请输入两个数字</p> <form action="{% url 'aptest:index' %}" > <! -- 此处action表示该form提交到的页面，此处含义为 aptest应用的index页面。如果action为空，则需要在ajax post的url中进行定义。 method不需要定义，在ajax里面定义即可 --> {% csrf_token %} a: <input type="text" id="a" name="a" > <br> b: <input type="text" id="b" name="b"> <br> <p>result: <span id='result'></span></p> <input type="button" id='sum' name='sum' value="cacl"> </form> <div id="box"></div> {% endblock %}
base.html：
{% include 'header.html' %} <title>{% block title %}{% endblock %}</title> </head> <body> {% include 'userauth.html' %} <h1>My Test site</h1> {% block content %}{% endblock %} {% block footer %} <hr> <p>Thanks for visiting my site2.</p> {% endblock %} <!-- {% include 'footer.html' %} --> </body> </html>
header.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head>
编辑index.js，定义js函数：
$(document).ready(function(){ $('p').css('color','red') $('form input[type=button]').click(function(){ //绑定form中tpye=button的input标签 a=$('form input[name=a]').val(); b=$('form input[name=b]').val(); // alert(a); //alert(b); $.ajax({ type: 'POST', //url: '/aptest/', 由于在index.html的form的action已经定义了该url，所以此处不需要再定义。 这段js代码如果直接写在index.html中，则该url也如此，不变 data: { a:a, b:b }, success:function(response,stutas,xhr){ $('#result').html(response); //将index view的返回值绑定到id=result的内容中。response参数表示所有从后端返回的值 alert(stutas); //执行成功返回状态success }, error:function(xhr,errorText,errorStatus){ alert(xhr.status+':'+xhr.statusText); //数据提交失败返回403 forbidden } }); });
执行结果：提交a=22,b=3，result返回25
index.js提交数据等待，超时：
$(document).ready(function(){ $('p').css('color','red') $('.loading').css('display','none') //隐藏名为.loading的类 $('#formnum input[type=button]').click(function(){ //选择id=formnum的form中的元素 $.ajax({ type: 'POST', //url: '/aptest/', // data: { // a:a, // b:b // }, data:$('#formnum').serialize(), //将id=formnum的form中提交的数据以序列化的方式进行提交，无需再具体写出form中每个input中的内容 success:function(response,stutas,xhr){ $('#result').html(response); //alert(stutas); }, error:function(xhr,errorText,errorStatus){ alert(xhr.status+':'+xhr.statusText); },
timeout:500 //设置超时时间，单位毫秒，超过500ms没有返回结果则报错 }); }); $(document).ajaxStart(function(){ //ajax提交数据时显示等待信息 $('.loading').show(); //.loading是在index.html中定义的class }).ajaxStop(function(){ $('.loading').hide(); }); });
index view打印request.POST内容如下，可以正常接收数据：
<QueryDict: {u'a': [u'33'], u'csrfmiddlewaretoken': [u'5foMcNoH0cALQ0xoK5NKsyYhSLlCdi88'], u'b': [u'2']}>
index.html编辑如下：
{% extends "base.html" %} {% block title %}aptest index{% endblock %} {% block content %} <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/static/jQuery/index.js"></script> <p>请输入两个数字</p> <form id="formnum" action="{% url 'aptest:index' %}" > {% csrf_token %} a: <input type="text" id="a" name="a" > <br><br> b: <input type="text" id="b" name="b"> <br> <p>result: <span id='result'></span></p> <input type="button" id='sum' name='sum' value="cacl"> </form><br> <span class="loading">正在加载中...</span> <div id="box"></div> {% endblock %}
执行显示如下：
ajax返回多个值（json格式）：
index.js编辑如下：
$(document).ready(function(){ $('p').css('color','red') $('.loading').css('display','none') //隐藏名为.loading的类 $('#formnum input[type=button]').click(function(){ $.ajax({ type: 'POST', //url: '/aptest/', data:$('#formnum').serialize(), dataType:'json', //定义需要返回json格式，如无特殊需要不要定义dataType，否则当放回的数据不是json格式，则无法正常返回数据 success:function(response,stutas,xhr){ alert(response); //返回Object Object ，从index view response的数据为：rets=[{'r1':PLUS,'r2':MuLT}]。如果返回的数据类型与前面dataType指定的格式不同，则会执行error函数 $('#result').html(response[0].r1); $('#result2').html(response[0].r2); //alert(stutas); }, error:function(xhr,errorText,errorStatus){ alert(xhr.status+' error: '+xhr.statusText); }, timeout:500 }); }); $(document).ajaxStart(function(){ $('.loading').show(); }).ajaxStop(function(){ $('.loading').hide(); }); // $('input').click(function(){ //点击按钮后再加载test.js文件，而不是全局调用 // $.getScript('test.js'); // }); });
index view:
@csrf_exempt def index(request): #主页 print request.method import json a=request.POST.get('a') b=request.POST.get('b') if a is not None and b is not None: PLUS=int(a) + int(b) MuLT=int(a) * int(b) rets=[{'r1':PLUS,'r2':MuLT}] #jQuery只能接受这种类型json数据，不加中括号也可以，直接将dict转换为json格式，js中也就不再需要加index去取值 retsj=json.dumps(rets) #将pathon对象转换为json字符串(str),jQuery只能接受这种类型json数据 return HttpResponse(retsj) context={} return render(request,'aptest/index.html',context)
index.html:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/static/jQuery/index.js"></script> <p>请输入两个数字</p> <form id="formnum" action="{% url 'aptest:index' %}" > {% csrf_token %} a: <input type="text" id="a" name="a" > <br><br> b: <input type="text" id="b" name="b"> <br> <p>plus: <span id='result'></span></p> <p>multi: <span id='result2'></span></p> <input type="button" id='sum' name='sum' value="cacl"> </form><br> <span class="loading">正在加载中...</span>
执行返回结果：
单选按钮，多选框，下拉列表：
下拉列表参考：http://blog.csdn.net/tiemufeng1122/article/details/44154571
index.html:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/static/jQuery/index.js"></script> <p>请输入两个数字</p> <form id="formnum" action="{% url 'aptest:index' %}" > {% csrf_token %} a: <input type="text" id="a" name="a" > <br><br> b: <input type="text" id="b" name="b"> <br><br> <!--定义单选按钮--> sex: <input type="radio" checked="checked" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br><br><br> <!--定义复选框--> <label><input type="checkbox" name="fruit" value="apple" />apple </label> <label><input type="checkbox" name="fruit" value="pear" />pear </label> <label><input type="checkbox" name="fruit" value="watermelon" />watermelon </label> <br><br> <!--定义下拉列表--> Select one:<select id="car" name="car"> <!--index view通过该name名称得到选择结果--> <option value="Volvo">Volvo</option> <option value="Saab" selected="selected">Saab</option> <!--默认选中--> <option value="Mercedes" disabled="disabled">Mercedes</option> <!--不可选，灰色--> <option value="Audi" title="Audi, your best choice!">Audi</option> <!--鼠标放在上面出现提示信息--> </select><br> <p>plus: <span id='result'></span></p> <p>multi: <span id='result2'></span></p> <input type="button" id='sum' name='sum' value="cacl"> </form><br> <span class="loading">正在加载中...</span>
index.js:
$(document).ready(function(){ // $('#car').css('color','green') //下拉列表设置为绿色//alert($('input:radio:checked').val()); //获取单选按钮的值 //var arr=[]; //$('input:checkbox:checked').each(function(){arr.push(this.value);}); #获取复选框的值 //alert(arr[0]); //alert($('#car').val()); //获取下拉列表的值 });
index.view:
#django中需要使用getlist获取复选框的值，使用get只能获取到最后一个值 request.POST.getlist('fruit')
页面显示：
