ajax初识

ajax有两个特点:

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

　　一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的)

示例:

　　页面输入两个整数,通过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性能高;

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄