ajax初识
ajax有两个特点:
一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的)
示例:
页面输入两个整数,通过AJAX传输到后端计算结果并返回
在HTML文件中:
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <input type="button" value="AJAX提交" id="b1"> <script src='static/jquery-3.2.1.min.js' > <script> $('.b1').on('click',function(){ $.ajax({ url: {%url xxx%}, #点击之后执行哪个url type: "post", #提交方式 data:{'a1':$('#i1').val(), 'a2' : $('#i2').val() },#传送的数据,如果没有,可以不写 success: function(data){ #如果成功之后执行下面的函数体 $('#i3').val(data); } }) }) </script>
在视图函数views.py中 (JsonResponse,将你得到的内容转化为JSON字符串)
def ajax_add(request): i1=int(request.GET.get(i1)) i2=int(request.GET.get(i2)) ret=i1+i2 return JsonResponse(ret,save=False) #如果返回一个页面,没有什么意义.因为JsonResponse拿到的是一个Json字符串
在urls中得到内容:
urlpatterns = [
...
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
...
]
AJAX常见的应用场景
1.搜索引擎根据用户输入关键字,自动提示检索关键字.
2.注册时,用户输入用户名时查重,(如果重复了,POST提交之后,刷新页面,用户还要重新输入用户名密码,体验不好)
AJAX的优缺点
优点:
1.AJAX使用JavaScript技术向服务器发送异步请求
2.AJAX请求无需刷新整个页面.
3.因为服务器响应内容不再是整个页面,而是页面中的部分内容,索引AJAX性能高;