• 当前标签:Ajax

ajax上传图片 form和base64上传 后端上传图片接口测试

用于后端测试,前端ajax上传图片。 JavaScript通过 new FileReader() 获取图片base64 无组件上传图片 Vue input上传图片 小程序选择、预览、删除、上传图片 Demo: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <title>图片上传测试</title>     <style>     section {         width: 1000px;         margin: 50px auto;         box-shadow: 0 0 5px 5px #eee;         padding: 20px 20px 40px;     }       #api {         width: 300px;         padding: 10px     }     </style> </head>   <body>     <section>         <p>输入测试接口:</p>         <input type="text" placeholder="https://huangliangbo.com" name="api" id="api">         <br>         <br>         <p>form表单提交:</p>         <input type="file" name="file" id="img">         <br>         <br>         <p>base64:</p>         <input type="file" name="base64" id="base64">         <p>输出:</p>         <div id="res"></div>     </section>     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>     <script>     $('#img').change(function(e) {         let file = e.target.files[0];         let param = new FormData(); //创建form对象         param.append('file', file, file.name); //通过append向form对象添加数据         // console.log(file)         $.ajax({                 url: $('#api').val(),                 type: 'POST',                 data: param,                 contentType: false,                 processData: false,             })             .done(function(res) {                 console.log("form-----success");                 console.log('form:', res)                 $('#res').text(JSON.stringify(res))             })             .fail(function() {                 console.log("form----error");             })             .always(function() {                 console.log("form----complete");             });       });       $('#base64').change(function(e) {         let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小         let reader = new FileReader();         reader.readAsDataURL(file); // 读出 base64         reader.onloadend = function() {             // 图片的 base64 格式, 可以直接当成 img 的 src 属性值             let dataURL = reader.result; // dataURL 为图片 base64 码             // 下面逻辑处理             $.ajax({                     url: $('#api').val(),                     type: 'POST',                     data: {                         img: dataURL // img 为后端接收参数                     },                 })                 .done(function(res) {                     console.log("base64 -- success");                     console.log('base64:', res)                     $('#res').text(JSON.stringify(res))                 })                 .fail(function() {                     console.log("base64---error");                 })                 .always(function() {                     console.log("base64----complete");                 });         };     });     </script> </body>   </html> github: https://github.com/hlbj105/upload-image coding: https://dev.tencent.com/u/hlbj105/p/upload-image/git Demo: https://hlbj105.github.io/upload-image/ https://hlbj105.coding.me/upload-image/

2018-07-06 10:29:31 14 0 0
阅读详情

通过豆瓣Top250 API 使用jQuery ajax 做简单的数据对接

不多说了,看代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>ajax对接</title> </head> <body>     <h1>标题</h1>     <ul class="ul"></ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>     <script>         $.ajax({             url:'http://api.douban.com/v2/movie/top250?start=0&count=25',             type:'GET', //GET             async:true,    //或false,是否异步             data:{                 // 需要发送到后端的数据                 // start: 0,                 // count: 25,             },             timeout:5000,    //超时时间             dataType:'jsonp',    //返回的数据格式:json/xml/html/script/jsonp/text             beforeSend:function(xhr){                 console.log(xhr)                 console.log('发送前')             },             success:function(data,textStatus,jqXHR){                  // 请求成过回调函数                 console.log(data)                 $('h1').text(data.title)                 for (var i = 0; i < data.subjects.length; i++) {                     var title = data.subjects[i].title                     var img = data.subjects[i].images.small                     // console.log(title)                     $('.ul').append(`<li>${title}<br /><img src="${img}"></li>`)                 }             },             error:function(xhr,textStatus){                 console.log('错误')                 console.log(xhr)                 console.log(textStatus)             },             complete:function(){                 console.log('结束')             }         })     </script> </body> </html>  

2017-11-27 20:31:24 10 2 0
阅读详情

Jquery Ajax 2

后端index.js const exp = require('express')       app = exp() app.use(exp.static('static')) app.listen(3000,()=>{     console.log('服务器运行了') }) index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Jquery Ajax</title> </head> <body>     <button id="btn">加载HTML内容</button>     <a href="#">加载JSON</a>     <input type="button" value="加载JS">     <section></section>     <section></section>     <section></section>     <script src="js/jquery.js"></script>     <script src="js/index.js"></script> </body> </html> info.html <h1>这里的内容是通过Ajax加载的</h1> <p>     这种方式需要服务端把数据拼成HTML 目前使用较少     现在流行的是服务端直接返回json数据     由浏览器中的js 完成html的拼装 原因有两个<br>     1 服务端不再拼html 压力会小一点<br>     2 js可以通过模板化很方便的将json转换成html </p> index.js $('button').click(function(){     // load方法从服务器加载数据 并把返回的数据放入被选元素中     $('section').load('info.html') }) $('a').click(function(){     $.getJSON('js/data.json',null,function(JSONDA){        alert(JSONDA.message)     }) }) $('input').click(function(){     $.getScript('js/script.js',function(res){         console.log(res)     }) }) data.json {     "status":"success",     "message":"服务端直接返回JSON文件\n服务端接口没有开发时可以直接返回json文件模拟请求结果" } script.js alert('来自js的问候')

2017-08-10 21:55:58 10 0 0
阅读详情

jQuery Ajax 1

需要安装Node.js本地测试,本次还需下载layer弹出层插件和jQuery.js 后端index.js: const exp = require('express') const bodyParser = require('body-parser') const app = exp() app.use(exp.static('wwwroot')) app.use(bodyParser.urlencoded({extended:true})) app.get('/api/user/login',(req,res)=>{     console.log(req.query)     res.status(200).json({status:'success',message:'登录成功'}) }) // 处理post请求 app.post('/api/user/login',(req,res)=>{     console.dir(req.body)     // req.get获取请求头     console.log(req.get('Connection'))     res.set('Y-school','zhiyou')     // res.set设置响应数据     setTimeout(function() {         res.status(200).json({status:'success',message:'登录成功'})     }, 6*1000); }) app.listen(3000,function(){     console.log('服务器运行了') }) index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Jquery Ajax</title> </head> <body>     <button data-method="get">发起get请求</button>     <button id="btn" data-method ='POST'>发起post请求</button>    <script src="js/jquery.js"></script>    <script src="js/layer/layer.js"></script>    <script src="js/ajax-event.js"></script> </body> </html> index.js var button =document.querySelector('button') // 发送get请求 button.onclick  = function(){       $.get('/api/user/login',  //请求的地址       {name:'黄海波',password:123456}, //发送数据     //   请求成功时运行的函数。       function(res,ree,ref){         // 第一个参数 返回结果的数据对象         // 第二个参数 status包含请求状态         // 第三个参数返回的是XMLHTTPrequest对象         // console.log(res.status)         // console.log(ree)         console.log(ref.responseText)     }) } // 原生写法比较复杂 记得东西比较多 // var  xhr = new XMLHttpRequest() // xhr.onreadystatechange = function(){ //   if(xhr.readyState == 4){ //   } // } // xhr.open() // xhr.send() // API Application Programing interface 应用程序编程接口 // 程序员开发时直接使用调用的接口(类 对象 方法 属性 事件等 ) // 通过接口(连接点 可以将程序员的代码链接到一起) // 程序员可以使用系统的人功能 或者其它功能代码库的功能 post.js console.log($('#btn')) $('#btn').click(function(){     console.log('cccccccc')     $.post('/api/user/login',           {name:'王宝强',password:'123456'},           function(res,statusText,jqXhr){                alert(res.message)                alert(jqXhr.getResponseHeader('Y-school'))                alert(jqXhr.getResponseHeader('X-Powered-By'))           }) }) // $.post()专门发起post请求 // $.get()专门发起get请求 // 都需要四个参数 //   1 请求地址 //   2 发出的数据 如果是get请求会将数据urlencode  //   然后加到url后面 支持对象格式的数据 //   3 请求成功的回调函数: //               1 服务端返回的数据(经过jquery转换的数据不需要再次手动转换) //               2 Ajax请求的状态 success 表示成功 //               3 JqAjax 是jquery在xhr对象的基础上又增加了一些功能 //               通过第三个参数可以获取响应头及其他通过原生xhr才能 //               获取的数据 获取响应头getResponseHeader //               4 服务端返回的数据类型(通常不用传 jquery会猜测类型) ajax.js layer.load(2,{shade:0.5}) // ajax()方法用于执行Ajax请求(异步http) $.ajax({     // async:false  同步     // accepts:{     //     fff:'text/json'     //  },     // dataType:'fff',     // accepts 发送的内容类型请求头 用于告诉服务器     // 浏览器可以接受服务器返回何种类型的数据     // headers:{     //     Accept:"application/json;charset=utf-8"     // },     // dataType预期的服务器响应的数据类型      dataType:'json',      cacle:false,             //   是否允许使用缓存 如果使用缓存 则有可能             //   不发起请求 直接使用上一次对同一个url请求获取数据     //  contentType      //  发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。     //  如果极个别情况下 需要使用multipart/form-data则需要修改这个值      // beforeSend:function(){     //     // 在这里设置请求头     //     alert('发送请求之前会调用')     // }       context:{title:'jquery Ajax',cc:'dd'},//请求成功时回调函数的this指向对象     data:{name:'宝强',password:'123456'},//发送给服务器的数据     // dataFilter:function(data,type){     //     // dataFilter处理服务端返回的数据类型     //     console.log('ddd' + data)     //     alert('正在对服务端返回的数据进行处理')     //     if(type == 'json') return JSON.parse(data)     //         return data     //         // Jquery会自动处理大多数情况下服务端返回的数据     // },     error:function(xhr,status,err){         alert('发起一个错误' + err)         if(err == 'timeout'){             layer.alert('不好意思,网络超时了',{icon:5},function(){                 layer.closeAll()             })         }     },     // 请求成功时的回调函数     success:function(data,status,xhr){       console.dir(this)       layer.closeAll()     //   关闭所有弹出层     },     // 自定义请求头     headers:{'Y-School':'wang'},     // success 请求成功时的回调函数     url:'/api/user/login', //请求地址     type:'POST', // 请求方式     // 设置本地的请求超时时间     timeout:5*1000, }) ajax-event.js var ajaxOptions = {     url:'/api/user/login',     data:{name:'wangzihao',password:'1234567'},     success:function(data){         layer.alert(data.message)     },

2017-08-10 21:50:47 14 0 0
阅读详情

初学 Ajax

概念 Ajax  (Async JavaScript & XML) 异步的JS和XML 最先由微软发明,Google搜索在首页上使用Ajax做搜索关键词建议后,Ajax就广泛应用起来了。 XML数据量偏大、解析相对困难、性能差。后来大家就转向JSON,但Ajax的名字没有变 XHR   xmlHttpRequest 向服务器端发起一个网络请求,并从服务器获得响应,XHR完全将HTTP开放给程序员使用 上图是项目文件结构,需要安装Node.js、npm和express插件、body-parser插件、multer插件。 项目中的内容 index.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>XHR网络请求</title> </head> <body>     <input type="text">     <!-- <script src="index.js"></script> -->       <script src="post.js"></script>      <!-- <script src="formDate.js"></script>  --> </body> </html> index.js var xhr = new XMLHttpRequest() // 创建一个xhr对象 后面将使用这个对象发起网络请求 // 当请求被发送到服务器时,我们需要执行一些基于响应的任务。 // 每当 readyState 改变时,就会触发 onreadystatechange 事件。 // readyState 属性存有 XMLHttpRequest 的状态信息。 xhr.onreadystatechange = function(ev){     switch(xhr.readyState){         case 0:         console.log('未打开')         break;         case 1:         console.log('服务器链接已建立')         break;         case 2:         console.log('请求已接收')         break;         case 3:         console.log('请求已处理')         break;         case 4:         console.log('请求已完成')         console.log(xhr.status)         // 状态码         console.log(xhr.statusText)         // 状态描述         console.log(xhr.responseText)         // 响应文本         console.log(xhr.responseType)         // 响应类型         console.log(xhr.getResponseHeader('Date'))         // getResponseHeader获取指定的响应头信息         console.log(xhr.getAllResponseHeaders())         // getAllResponseHeaders获取所有的响应数据         break;     } } xhr.open('GET','/comment?petname=wangBaoQiang&score=5&content=速度很快质量也不错') // 设置请求方法 请求地址 及是否使用异步方式发起请求 xhr.send() post.js var xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){     if(xhr.readyState == 4){         console.log(xhr.responseText)     } } xhr.open('POST','/comment') xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 如果向服务端发送的数据是urlencode 需要设置Content-Type请求头 // 如果不设置某些服务器可能无法正常解析收到数据 xhr.send('petname=wangBaoQiang&score=5&content=速度很快质量也不错') // 向服务端发送数据 formDate.js var data = new FormData() data.append('petname','王宝强') data.append('score',5) data.append('content','服务态度很好') var xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){     if(xhr.readyState == 4){         console.log('请求完成')         console.log(xhr.responseText)     } } xhr.open('POST','http://127.0.0.1:3000/comment',true) xhr.send(data) console.log('我是否等待 直到网络请求完成') // 第三个参数指定使用同步完成请求或异步请求 // 默认是true即异步请求 // 改为false可以变成同步请求 同步请求造成页面卡死直到请求完成 // 通常会影响用户体验 不建议使用 // Ajax // Async JavaScript and XMl // 异步:不等待其它条件具备就继续执行代码 // 同步:等待条件后才继续执行代码 后端文件index.js const exp = require('express') const bodyParser = require('body-parser') const multer = require('multer') // multer模块可以处理以formData形式提交的数据 // 还可以处理上传文件 const app = exp() const form = multer() app.use(exp.static('public')) app.use(bodyParser.urlencoded({extended:true})) app.get('/comment',(req,res)=>{   console.log('收到get请求' + JSON.stringify(req.query))   res.status(200).send('谢谢你的评价') }) // 第二个参数form.array()在正式处理请求之前处理以formDara // 方式提交的数据 如果发现是以formdata提交的数据  // 会把这些数据取出来放入req.body中 app.post('/comment',form.array(),(req,res)=>{     'use strict'  //严格模式      console.log(req.body)     console.log(req.originalUrl)     console.log('cc' + req.route)     // console.log(userAgent)     // 使用let声明变量时 不能提前使用这个变量会报错     // let相当于var let的限制比var大 代码出错的可能性更小     let userAgent = req.get('User-Agent')     console.log(userAgent)     console.log('用户语言偏好' + req.get('Accept-Language'))     console.log('收到post请求' + JSON.stringify(req.body))     res.header('Access-Control-Allow-Origin','*')     // 解决跨域 设置Access-Control-Allow-Origin:*     // 表示允许任何域名跨域访问     // setTimeout延迟执行一段代码 是异步的 它不会等待延迟的代码     setTimeout(function() {         res.status(200).send('感谢你的光临')     }, 10*1000); }) app.listen(3000,function(){     console.log('服务器运行了') }) // 总结 使用xhr发送请求 xhrhttprequest //     请求行: //       包括请求方法和url //       xhr.open() //     请求头:         // xhr.setRequestHeader('name','value')         // 设置请求头之后必须在xhr.open()方法之后调用     //    空行:     //      不需要控制     //   请求体:     //    xhr.send()     // 在服务端获取请求数据     //   请求行:

2017-08-09 19:32:26 13 0 0
阅读详情
  • 1
前往