3秒了解Ajax数据交互

Posted 四季奶青全糖去冰@

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了3秒了解Ajax数据交互相关的知识,希望对你有一定的参考价值。

目录

第1秒——基础知识

1.1 客服端与服务器

1.2 服务器工作过程

1.3 URL地址

1.4 接口

第2秒——了解Ajax

2.1 概念

2.2 优缺点

第3秒——使用ajax 

3.1 $.get()   获取数据

         3.2 $.post()  提交数据

         3.3 $.ajax()  即可以获取又可以提交

3.4 上传文件


第1秒——基础知识

1.1 客服端与服务器

服务器:上网过程中负责存放和对外提供资源的电脑
客户端:上网过程中,负责获取和消费资源的电脑

1.2 服务器工作过程

html,CSS,javascript,数据都是服务器对外提供的资源

资源的请求方式
     get     通常用于获取服务端资源
     post   通常用于向服务器提交数据

1.3 URL地址

统一资源定位符
作用
     标识互联网上每个资源的唯一存放位置

 组成部分
     1.客户端与服务器之间的通信协议
     2.存有该资源的服务器名称
     3.资源在服务器上具体的存放位置

1.4 接口

使用Ajax请求数据时,被请求的url地址就是数据接口,每个接口必须有请求方式

接口测试工具  Postman,可以直接测试接口能否正确运行。

接口文档的组成部分:

第2秒——了解Ajax

2.1 概念

Ajax,Asynchronous JavaScript and XML,即使用JavaScript语言与服务器进行异步交互传输的数据为XML。

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。

Ajax并非编程语言,而是一种使用现有标准的新方法。

2.2 优缺点

优点:不需要重新加载整个页面,就可以实现与服务器交换数据并更新部分网页内容。

缺点:在需要同步交互的时候,增多了对服务器的访问次数,有兼容性问题。

第3秒——使用ajax 

3.1 $.get()   获取数据

语法格式:$.get(url,[data],[callback]);

url:提交数据的地址(String,必选);
data:要提交的数据(object,非必选);
callback:数据提交成功时的回调函数(function,非必选);

发起不带参数的GET请求:

<button id="btnGET">发起不带参数的GET请求</button>
<script>
    'user strict'
     $(function() 
         $("#btnGET").on('click', function() 
              $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) 
                  console.log(res);
              );
         )
     )
</script>

发起带参数的GET请求:

<button id="btnFETINFO">发起带参数的GET请求</button>
<script>
    $(function() 
       $("#btnFETINFO").on('click', function() 
           $.get('http://www.liulongbin.top:3006/api/getbooks', 
                    id: 1
           , function(res) 
                    console.log(res);
           )
       )
    )
</script>

3.2 $.post()  提交数据

语法格式:$.post(url,[data],[callback]);

url:提交数据的地址(String,必选);
data:要提交的数据(object,非必选);
callback:数据提交成功时的回调函数(function,非必选);

<button id="btnPOST">发起post请求</button>
<SCript>
     $(function() 
          $("#btnPOST").on('click', function() 
                $.post('http://www.liulongbin.top:3006/api/getbooks', 
                    bookname: '水浒传',
                    author: '施耐庵',
                    piblisher: '天津图书出版社'
                , function(res) 
                    console.log(res);
                )
          )
      )
</SCript>

3.3 $.ajax()  即可以获取又可以提交

语法格式:
            $.ajax(
                 type: '', //请求方式
                 url: '', //请求URL地址
                 data: '', //请求携带的数据
                 sucess: function(res) //请求成功之后的回调函数
             ) 

发起GET请求:

<button id="btnGET">发起GET请求</button>
<script>
        $(function() 
            $('#btnGET').on('click', function() 
                $.ajax(
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: 
                        id: 1
                    ,
                    success: function(res) 
                           console.log(res);
                    
                )
            )
        )
</script>

发起POST请求:

<button id="btnPOST">发起POST请求</button>
<script>
        $(function() 
            $('#btnPOST').on('click', function() 
                $.ajax(
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: 
                        bookname: '史记',
                        author: '司马迁',
                        publisher: '上海图书出版社'
                    ,
                    success: function(res) 
                        console.log(res)
                    
                )
            )
        )
</script>

3.4 上传文件

不对数据进行url编码,将FormData 数据原样发到服务器         
processData : false,

不设置content-Type属性,使用 FormData 默认的 Content-Type 值        
contentType : false, 

ajaxStart();    
ajaxStart() 方法规定Ajax请求开始时运行的函数。该方法会监听当前文档中的所有Ajax请求。   
语法格式: $(document).ajaxStart(function());

ajaxStop();    
ajaxStop()方法规定所有的Ajax请求完成时运行的函数。   
语法格式: $(document).ajaxStop(function());

注意:自 jQuery 版本 1.8 起,该方法只被附加到文档。

jQuery实现文件上传案例:

    <input type="file" id="file1" />
    <button id="btnUpload">上传文件</button>

    <br />
    <img src="../lib/loading.gif" alt="" style="display: none;" id="loading" />

    <script>
        $('#btnUpload').on('click', function() 
            // 监听到Ajax请求被发起了   会监听所有的ajax请求
            $(document).ajaxStart(function() 
                $('#loading').show();
            );

            // 监听到 Ajax 完成的事件
            $(document).ajaxStop(function() 
                $('#loading').hide();
            );

            var files = $('#file1')[0].files;
            if (files.length <= 0) 
                return alert('请选择文件后在上传');
            
            var fd = new FormData();
            fd.append('avatar', files[0]);

            // 发起 jQuery 的 Ajax 请求,上传文件
            $.ajax(
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                //不对数据进行url编码,将FormData 数据原样发到服务器
                processData: false,
                //不设置content-Type属性,使用 FormData 默认的 Content-Type 值
                contentType: false,

                success: function(res) 
                    console.log(res);
                
            );

        )
    </script>

以上是关于3秒了解Ajax数据交互的主要内容,如果未能解决你的问题,请参考以下文章

django与Ajax

深入了解ajax

web前端和后端怎么进行数据交互?

ajax,请教用ajax实现一个功能的思路?

js面试--ajax

达达前端Ajax实战项目源码讲解(快速入门的实例)Github源码