day059 ajax初识 登录认证练习

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性能高;