数据请求之AJAX

这篇具有很好参考价值的文章主要介绍了数据请求之AJAX。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

(一)网页如何请求数据

(二)资源的请求方式

(三)AJAX

1、什么是AJAX:

2、AJAX的应用场景:

3、Ajax请求中常用的三种方法

(四)接口

(五)XMLHttpRequest

1、使用xhr发起get请求(原生ajax)

2、使用xhr发起 post请求

(六)数据交换格式

1、XML

2、JSON

(七)XMLHttpRequest Level2特性

1、可以设置 HTTP 请求的时限

2、可以使用 FormData 对象管理表单数据

3、可以上传文件

4、可以获得数据传输的进度信息

(八)axios

  (1)用axios发起get请求

(2)用axios发起post请求

(3) 直接用axios发起get请求

(4)直接用axios发起post请求


(一)网页如何请求数据

需要通过请求—处理—响应三个步骤

  1. 客户端请求数据资源
  2. 服务器处理这次数据请求
  3. 服务器把数据响应给客户端

(二)资源的请求方式

最常见的请求方式有get和post

get:请求通常 用于获取服务器端资源,例如根据URL地址,从服务器获取HTML文件,css文件,JS文件,图片和数据资源

post:请求通常向服务器提交资源;例如登录时向服务器提交登录信息,注册时向服务器提交注册信息等各种提交操作

(三)AJAX

1、什么是AJAX:

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,不刷新整个页面就可以进行数据局部更新。

2、AJAX的应用场景:

用户名检测、搜索提示、数据分页显示、数据的增删改查

3、Ajax请求中常用的三种方法

(1)$.get(url,[data],[callback]),专门用于发起get请求,从而将服务器的资源请求到客户端进行使用,第一个参数是要请求的资源 地址 ;第二个参数为Object类型,为请求资源期间要携带的参数;第三个参数为请求成功时的回调函数

如何发送get请求

  • 引入jquery.js
  • 在jquery入口函数中发送get请求,其中{id:1}为请求id为1的数据

<script src="lib/jquery.js"></script>

    <button class="btn">不带参数的请求</button>

    <script>

    //$function为jquery的入口函数

    $(function (){

        document.querySelector('.btn').addEventListener('click',function(){

            $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){

                console.log(res)

            })

        })

     })

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

(2)$.post()

$.post(url,[data],[callback]),专门用于发起post请求,第一个参数是提交数据的地址 ;第二个参数为Object类型,为要提交的数据;第三个参数为提交成功时的回调函数

如何向服务器提交数据

 <script src="lib/jquery.js"></script>

    <button class="btn">提交数据</button>

    <script>

        $(function(){

            document.querySelector('.btn').addEventListener('click',function(){

                $.post('http://www.liulongbin.top:3006/api/addbook',{bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' },function(res){

                    console.log(res)

                })

            })

        })

    </script>

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

由于多次点击提交显示如图,第一次的时候显示的是提交的数据

(3)$.ajax()是一个功能比较综合的函数,可以对ajax请求做更详细的配置

基本语法

 $.ajax({

            type:'',   //请求方式,像get,post

            url:'',    //请求地址

            data:{},   //请求携带的数据

            success:function(res){}   //请求成功后的回调函数

        })

(3.1)用$.ajax()发起GET请求

只需要将type属性设置为get即可

<script src="lib/jquery.js"></script>

    <button class="btn">请求数据</button>

    <script>

        $(function(){

                document.querySelector('.btn').addEventListener('click',function(){

                        $.ajax({

                        type:'get',//请求方式,像get,post

                        url:'http://www.liulongbin.top:3006/api/getbooks',//请求地址

                        data:{id:1},//请求携带的数据

                        success:function(res){

                            console.log(res)

                        }//请求成功后的回调函数

                       

                        })

                })

        })

    </script>

(3.2)$.ajax设置post请求,只需要将type改为post即可

 $(function(){

                document.querySelector('.btn').addEventListener('click',function(){

                        $.ajax({

                        type:'post',//请求方式,像get,post

                        url:'http://www.liulongbin.top:3006/api/addbook',//请求地址

                        data:{

                            bookname: '水浒传',

                            author: '施耐庵',

                            publisher: '上海图书出版社'

                        },//请求携带的数据

                        success:function(res){

                            console.log(res)

                        }//请求成功后的回调函数

                       

                        })

                })

        })

(四)接口

1、接口的概念:使用Ajax请求数据时,被请求的url地址,就叫做数据接口,同时,每个接口有自己的请求方式。

2、接口测试工具:postman

(五)XMLHttpRequest

是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,Ajax函数,就是基于xhr对象封装出来的

1、使用xhr发起get请求(原生ajax)

  • 创建XHR对象
  • 调用open方法,指定请求地址与URL地址
  • 使用send函数,发起ajax请求
  • 监听onreadystatechange事件

2、使用xhr发起 post请求

  • 创建 xhr 对象
  • 调用 xhr.open() 函数 设置 Content-Type 属性(固定写法)
  • 调用 xhr.send() 函数,同时指定要发送的数据
  • 监听 xhr.onreadystatechange 事件

(六)数据交换格式

1、XML

XML是可扩展的标签语言,用来传输和存储数据,是数据的载体

<note>

        <to>ls</to>

        <from>zs</from>

        <heading>通知</heading>

<body>晚上开会</body> </note>

(1)XML缺点

  • XML 格式臃肿,和数据无关的代码多,体积大,传输效率低
  • 在 Javascript 中解析 XML 比较麻烦

2、JSON

JSON就是JavaScript对象和数组的字符串表示方法,使用文本表示JS对象或数组的信息,JSON的本质就是字符串

(1)作用:JSON是一种轻量级的文本数据交换格式,专门用于存储和传输数据,JSON比XML更小,更快,更易于解析。

(2)JSON的两种结构

JSON中有数组和对象两种结构,通过这两种结构相互嵌套,可以实现各种复杂的数据结构;JSON中字符串必须用双引号包裹,value的数据类型可以是数字、字符串、布尔值、Null、数组,对象。

{    

        "name": "zs",  

        "age": 20,  

        "gender": "男",    

        "address": null,    

        "hobby": ["吃饭", "睡觉", "打豆豆"]

}

(3)JSON语法的注意事项

  • 属性名必须使用双引号包裹
  • 字符串类型的值必须使用双引号包裹
  • JSON 中不允许使用单引号表示字符串
  • JSON 中不能写注释
  • JSON 的最外层必须是对象或数组格式 不能使用 undefined函数作为 JSON 的值

(4)JSON和JS对象的相互转换

(4.1)JSON.parse()

将JSON字符串转换为JS对象

 var obj=JSON.parse('{"a":"hello","b":"world"}')

       console.log(obj)

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

(4.2)JSON.stringfy()

将JS对象转换为JSON字符串

 let obj={

        a:'hello',

        b:'world'

       }

       let str=JSON.stringify(obj)

       console.log(str)

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

(七)XMLHttpRequest Level2特性

1、可以设置 HTTP 请求的时限

可以设置xhr.timeout属性设置请求时限,当 等待时间超过多久时,会停止发送HTTP请求

 let xhr=new XMLHttpRequest()

        xhr.timeout=30

        xhr.ontimeout=function(){

            console.log('请求超时了')

        }

       

        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')

        xhr.send()

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4&&xhr.status===200){

                 console.log(JSON.parse(xhr.responseText))

            }

        }

当请求超过30毫秒时

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

当将请求时限设置为3000毫秒时,未超时,打印出请求成功的数据

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

2、可以使用 FormData 对象管理表单数据

(1)提交表单数据

// 1、创建FormData()实例

        let fd=new FormData()

        //2、调用append函数,向fd中追加数据

        fd.append('uname','zs')

        fd.append('password','123456')

       

        let xhr=new XMLHttpRequest()

        xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')

        xhr.send(fd)

        xhr.onreadystatechange=function(){

            if(xhr.readyState===4&&xhr.status===200){

                console.log(JSON.parse(xhr.responseText))

            }

        }

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax (2)用于获取网页表单中的值

 <!-- //这里要写name属性 -->

    <form id="form1">

        <input type="text" name='uname' autocomplete="off">

        <input type="password" name="upwd">

        <button type="submit">提交</button>

    </form>

    <script>      

        let form=document.querySelector('#form1')

        form.addEventListener('submit',function(e){

            //阻止表单默认行为

            e.preventDefault()

           // 创建FormData()实例,快速获取表单中的数据

           let fd=new FormData(form)

           let xhr=new XMLHttpRequest()

            xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')

            xhr.send(fd)

            xhr.onreadystatechange=function(){

                if(xhr.readyState===4&&xhr.status===200){

                    console.log(JSON.parse(xhr.responseText))

                }

            }

   })

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

3、可以上传文件

先判断是否选择了文件,再将文件追加到FormData中,通过ajax提交给服务器,获取数据的信息,将图片显示到定位的位置

<body>
    <input type="file" id="file1"/>
    <button id="btnUpload">上传文件</button>
    <br>
    <!-- 文件上传成功后显示文件 -->
    <img src="" alt="" id="img"  width="400" >

    <script>
        const btnUpload=document.querySelector('#btnUpload')
        // 为按钮添加 click 事件监听
        btnUpload.addEventListener('click',function(){
           // 3. 获取到选择的文件列表,其获取的结果为数组
           let files=document.querySelector('#file1').files
           if(files.length<=0){
            alert("请选择上传的文件")
           }else{
            // 如果选择了文件则创建FormData实例,向FormData中追加文件
            let fd=new FormData()
            fd.append('avatar',files[0])
            
            let xhr=new XMLHttpRequest()
            xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
                    let data=JSON.parse(xhr.responseText)
                    console.log(data)
                    if(data.status===200){
                        document.querySelector('#img').src='http://www.liulongbin.top:3006' + data.url

                    }
                    else{
                        console.log(`图片上传失败${data.message}`)
                    }

                }
            }
           }

        })
    </script>
</body>

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

4、可以获得数据传输的进度信息

用xhr.upload.onprogress事件,获取文件上传的进度,主要属e.lengthComputable,e.loaded,e.total分别为当前资源是否可以计算长度,已传字节,需要传输的总字节

  //在上次上传文件的基础上            
             let xhr=new XMLHttpRequest()

            // 在此处监听上传的进度
            xhr.upload.onprogress=function(e){
                if (e.lengthComputable) {
                // e.loaded 已传输的字节
                // e.total  需传输的总字节
                let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                console.log(percentComplete)
                 }
            }

(八)axios

Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象,axios 简单易用。 相比于 jQuery,axios 更加轻量化,只专注于网络数据请求.

(1)用axios发起get请求

 document.querySelector('#btn1').addEventListener('click',function(){
            let url='http://www.liulongbin.top:3006/api/get'
            let paramsObj={name:'小开心',age:21}

            axios.get(url,{ params:paramsObj }).then(function(res){
                // console.log(res)
                console.log(res.data)

            })
        })

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

 (2)用axios发起post请求

document.querySelector('#btn2').addEventListener('click',function(){
                let url='http://www.liulongbin.top:3006/api/post'
                let  dataObj={address:'北京',location:'广义区'}
                axios.post(url,dataObj).then(function(res){
                    //res.data就是向服务器提交的数据
                    console.log(res.data)

                })

            })

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

(3) 直接用axios发起get请求

document.querySelector('#btn3').addEventListener('click',function(){
                let url='http://www.liulongbin.top:3006/api/get'
                let paramsObj={name:"小开心",age:22}
                axios({
                    method:'GET',
                    url:url,
                    params:paramsObj, 
                }).then(function(res){
                    console.log(res.data)
                })
                

            })

ajax提交表单,JavaScript,服务器,前端,开发语言,jquery,ajax

 (4)直接用axios发起post请求

与get一样只是传输数据将params换成data文章来源地址https://www.toymoban.com/news/detail-765282.html

到了这里,关于数据请求之AJAX的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JSP提交表单后跳转servlet页面提示404,显示“请求资源[…/Servlet]不可用问题,找不到资源

    今天jsp页面,发现在提交表单数据到servlet程序的时候404了。 单独访问jsp和servlet都没问题,一跳转就显示404。 经检查:表单里的action值与webservlet值一致,其他的设置都没有问题, 百般思索。。。。。。挠头到了后半夜,终于。。。。。。。。。解决了这个问题。 经过调整和

    2024年02月06日
    浏览(37)
  • vue详细用法,ajax异步请求,案例分析 Element-ui组件使用,表单提交更新,下载,超详细

    标签及属性的使用 1.1 template 标签 1.2 form表单 1.2.1 ref属性 1.2.2 :model属性 1.2.3 :rules属性 1.2.4 label-width属性 1.2.5 el-row标签 1.2.5 el-col 标签 :span=\\\"12\\\"属性 1.2.5 el-form-item 标签 1.2.6 label 属性 1.2.7 prop属性 required 1.2.9 v-model属性 1.2.8 placeholder属性 效果图: 1.3 Select 选择器 当选项过多时,

    2023年04月12日
    浏览(79)
  • .net6中, 用数据属性事件触发 用httpclient向服务器提交Mes工单

    MES开发中, 客户往往会要求 工单开始时记录工艺数据, 工单结束时将这些工艺数据回传到更上一级的WES系统中. 因为MES系统和PLC 是多线程读取, 所以加锁, 事件触发是常用手段.

    2024年02月10日
    浏览(46)
  • lua 请求ftp服务器数据,下载文件

    1、装入ftp库 2、调用ftp的get()方法 3、get()方法参数格式: 4、将返回到的数据写入文件中 例如,本次获取专利数据系统 http://patdata1.cnipa.gov.cn/ 的ftp站点数据

    2024年02月16日
    浏览(37)
  • flutter动态渲染从服务器请求的列表数据

    比如我们从服务器请求到的列表数据,需要渲染到页面上,但是在flutter里面还是需要使用他们的ListView或者GridView或者别的组件才可以,或者有children这种属性的组件上使用。 比如我们在一个有状态的组件Lists里面,在initState的时候,发送请求获取数据,并将获取到的数据通过

    2024年01月16日
    浏览(42)
  • C# 通过 HttpWebRequest发送数据以及服务器通过Request请求获取数据

    C#中HttpWebRequest的用法详解 可参考: C#中HttpWebRequest的用法详解 C# HttpWebRequest详解 C# 服务器通过Request获取参数 可参考: C# WebService 接口 通过Request请求获取json参数 1、后台程序发送HTTP请求的Class,服务器端也要添加该类 2、服务端返回HTTP请求的数据class,客户端也要有 1、后台

    2024年02月06日
    浏览(55)
  • form表单提交数据的两种方式——submit直接提交、AJAX提交

    form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下: 注意: method指定请求方式 每个input表单项需要有name属性 通过上述方式提交表单数据后,会发生页面跳转,跳转至action所指定的地址,很难满足开发

    2024年02月13日
    浏览(44)
  • form表单提交数据如何拿到返回值

    使用form表单提交参数的时候,是依据input框里面的name值传给后端的,只需在form节点添加action以及提交方式就可以调通前后端。但是这种直接的操作是不能够判断接口是否调通的,是拿不到返回值的。这就意味着不能够做对应的操作。 1:引入jquery.form.js的插件,这是一个jqu

    2024年02月06日
    浏览(75)
  • 一键轻松造数据:通过Postman实现表单提交

      在测试的过程中,需要大量的表单。于是我选择了通过postman发送表单提交的接口来造数据。 如上图所示,表单提交接口所需的参数以及请求体中需模拟的IP地址。参数为 {{}} 的表示需要不同的实参,至于原因就不在这里赘述了。 如何找到数据呢?还能够贴合心意? 我想到

    2024年02月15日
    浏览(41)
  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包