zoukankan      html  css  js  c++  java
  • 第三方包 vue-resource

    使用 vue-resource 发起 get post jsonp 请求

    注意:

    假设当前服务器后台监听的端口是 7000

    1,get post 既可以请求数据,也可以发送数据

    2,请求的是 服务器 所在的 url 路径(http://localhost:7000/add),当然,如果你的客服端也是由 node 后台直接读写文件返回的 html 文件。那么证明 该 html 页面也是放在该和后台监听的 同一个端口下面。就可以不写全请求的url(如:/add 注意:那么就相当于请求; http://localhost:7000/add

    3 , jsonp 是用 script 标签来完成跨域请求的 (请求 url,然后返回 res.end('cb(data))')由html里面书写 js 函数自行操作

     

    注意:form 表单提交数据,如果 在 <input type='submit‘> 中添加点击事件,那么 form 表单提交的数据就不会在 url 处 自动拼接数据(/add?id=&name=)。拼接后是会有数据的 (/add?id=123&name= zhangsan)

     

    Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
    Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
    ​
    // in a Vue instance
    this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
    this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
    ​
    ​
     this.$http.jsonp('https://suggest.taobao.com/sug?q=笔&callback=sug').then(function (result) {
                    console.log(result);
                    console.log(result.body);
                  })

    List of shortcut methods:

    • get(url, [config])

    • head(url, [config])

    • delete(url, [config])

    • jsonp(url, [config])

    • post(url, [body], [config])

    • put(url, [body], [config])

    • patch(url, [body], [config])

    Config

    ParameterTypeDescription
    url string URL to which the request is sent
    body Object, FormData, string Data to be sent as the request body
    headers Object Headers object to be sent as HTTP request headers
    params Object Parameters object to be sent as URL parameters
    method string HTTP method (e.g. GET, POST, ...)
    responseType string Type of the response body (e.g. text, blob, json, ...)
    timeout number Request timeout in milliseconds (0 means no timeout)
    credentials boolean Indicates whether or not cross-site Access-Control requests should be made using credentials
    emulateHTTP boolean Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
    emulateJSON boolean Send request body as application/x-www-form-urlencoded content type
    before function(request) Callback function to modify the request object before it is sent
    uploadProgress function(event) Callback function to handle the ProgressEvent of uploads
    downloadProgress function(event) Callback function to handle the ProgressEvent of downloads

    1. get post jsonp三种请求方式

    <!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></title>
        <script type="text/javascript" src="../vue.js"></script>
        <!-- 注意:vue-resource 依赖于 Vue,所以要注意加载顺序 -->
        <script type="text/javascript" src="../vue-resource.min.js"></script></head>
    <body>
        <div id="app">
            <input type="button" name="" value="get请求" @click='getInfo'>
            <input type="button" name="" value="post请求" @click='postInfo'>
            <input type="button" name="" value="jsonp请求" @click='jsonpInfo'>
        </div>
    ​
    ​
    <script type="text/javascript">
    ​
    ​
    ​
        new Vue({
             el:'#app',
             data:{},
             methods:{
                 
                getInfo() {
                  this.$http.get('https://api.apiopen.top/singlePoetry').then(function (result) {
                    console.log(result.data);
                  })
                },
                 
                /*
                三个参数:
                  参数1:url请求路径 
                  参数2:{body}请求体内容
                  参数3:config 配置项 比如设置(application/x-www-form-urlencoded)
                        提交数据的方式。
                
                */
                postInfo() {
                  this.$http.post('https://api.apiopen.top/singlePoetry',{发送的数据},{emulateJSON:true}).then(function (result) {
                    console.log(result);
                  })
                },
                jsonpInfo() {
                  this.$http.jsonp('https://suggest.taobao.com/sug?q=笔&callback=sug').then(function (result) {
                    console.log(result);
                    console.log(result.body);
                  })
                }
             }
        });
    ​
    ​
    </script>
    </body>
    </html>

    ###

    node 仿 jsonp 请求

    跨域请求

     

    注意:服务端返回形式是 当你客户端发起请求时,服务端以 res.write() 的形式返回给客户端的

    跨域请求 的 script 标签中 (以字符串的形式)

    客户端

     
    <!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></title>
        
    </head>
    <body>
    ​
    ​
    <script type="text/javascript">
        function showInfo(data) {
            console.log(data);
        }
    </script><script src="http://127.0.0.1:8000/getscript?callback=showInfo"></script></body>
    </html>

    服务端


    const http =require('http');
    const url = require('url');
    const querystring = require('querystring');
    ​
    http.createServer((req,res)=>{
    ​
      // const url = req.url;
      // var myURL = url.parse('https://user:pass@sub.host.com:8080/p/a/t/h?query=string#hash');
      // console.log(myURL);
      // var querystr = querystring.parse(myURL.query);
      // console.log(querystr);
    ​
       const getURL = url.parse(req.url,true);
    ​
       console.log(getURL);
    ​
      if(getURL.pathname === '/getscript') {
          
          var data = {
            name:'little'
          };  
          var scriptStr = `${getURL.query.callback}(${JSON.stringify(data)})`;
    ​
          res.end(scriptStr);
      }
      else {
        res.write("console.log('not found');");
        res.end();
      }
    ​
    }).listen(8000,()=>{
        console.log('localhost:8000');
    });
     

     

  • 相关阅读:
    初试 spring web mvc
    读取网络数据缓存在本地 流程图
    servlet 过滤器实现 请求转发(跳转);跨域转发请求;tomcat 环境下。
    C# .net基于Http实现web server(web服务)
    微信公众平台开发
    Linux目录结构及作用
    MySQL事件调度器event的使用
    MySQL触发器trigger的使用
    存储过程的查、改、删
    MySQL游标的简单实践
  • 原文地址:https://www.cnblogs.com/xixiaijunjun/p/10897020.html
Copyright © 2011-2022 走看看