美文网首页
get和post方式请求数据 jsonp

get和post方式请求数据 jsonp

作者: 前端小华子 | 来源:发表于2017-07-17 22:09 被阅读0次

    get方式请求数据:

     var theurl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
     myUrl = encodeURIComponent(theurl);
     url = "http://127.0.0.1:3000?myUrl=" + myUrl;
     $http({
        url: url,
        method: "get"
     }).then(function(res) {
        consoe.log(res);
     }, function(err) {
        console.log(err);
     });
    

    通过jsonp请求数据,通过动态创建script标签来访问服务器,把回调函数名作为参数传递给服务器 服务器请求得到数据以后,把数据放回到回调函数中 前端通过回调函数的实现部分,得到数据。

    var script = document.createElement("script");
    url = url + "&callback=xxx";
    script.src = url;
    document.documentElement.appendChild(script);
    

    angular的$http服务中,callback参数必须写成JSON_CALLBACK,意思是告诉angular自己去创建一个回调函数

    var myUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html";
    $http({
      method: "jsonp",
      url: "http://localhost:3000?myUrl=" + myUrl + "&callback=JSON_CALLBACK"
    })
      .then(function(res) {
          console.log(res);
       },function(err) {
           console.log(err);
       });
    

    $http的post请求

    $http({
       method: "post",
       url: "http://localhost:3000",     
         //post请求需要加这个请求头设置类型
       headers: {
            "Content-Type": "application/x-www-form-urlencoded"
       },
       data: {
             myUrl: "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"
       }
      })
      .then(function(res) {
        console.log(res);
       },
       function(err) {
        console.log(err);
       });
    

    promise请求

    var promise = $http({
    method: "post",
    url: "http://localhost:3000",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    data: {
      myUrl: "http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html"}
    });
    
    promise.success(function(res) {
    console.log(res);
    });
    promise.error(function(err) {
    console.log(err);
    });
    //或者
    promise.then(function(res) {
    console.log(res);
    }, function(err) {
    console.log(err);
    })
    

    NodeJS服务器代码:

    1. get请求对应的服务器代码:
    var http = require("http");
    var url = require("url");
    var qs = require("querystring");
    
    http.createServer(function(req, res) {
        res.setHeader("Access-Control-Allow-Origin", "*");
        //        console.log(req.url);
        //        对请求对象的url进行解析,拿到查询参数字符串
        var query = url.parse(req.url).query;
        //        console.log(query);
        //把key=value字符串转变成对象的方式 方便获取
        var queryObj = qs.parse(query);
        //用来接收数据的变量
        var result = "";
        //        console.log(queryObj.myUrl);
        http.get(queryObj.myUrl, function(request) {
            request.on("data", function(data) {
                result += data;
            });
            request.on("end", function() {
                if(queryObj.callback) {
                    var fn = queryObj.callback;
                    var resultStr = JSON.stringify(result);
                    var str = fn + "(" + resultStr + ")";
                    res.end(str);
                } else
                    res.end(result);
            });
        }).on("error", function(err) {
            res.end(err);
        })
        //        res.end("hello sb");
    })
    .listen(3000, function() {
        console.log("服务器启动成功,监听3000...");
    });
    

    2.post请求对应的服务器代码:

    var http = require("http");
    var url = require("url");
    var qs = require("querystring");
    
    http.createServer(function(req, res) {
         res.setHeader("Access-Control-Allow-Origin", "*");
        //设置编码格式
        req.setEncoding("utf8");
        //用来接收数据
        var postData = "";
        //监听:如果前端有数据发送过来
        req.addListener("data", function(data) {
            postData += data;
        });
        //前端数据传输完毕
        req.addListener("end", function() {
            //把接收到的data数据转换成对象方式
            var postDataObj = JSON.parse(postData);
            var myUrl = postDataObj.myUrl;
            //用来接收网易数据的变量
            var resultData = "";
            http.get(myUrl, function(request) {
                request.on("data", function(data) {
                    resultData += data;
                });
                request.on("end", function() {
                    res.end(resultData);
                })
            }).on("error", function(err) {
                console.log(err);
            });
        });
    })
    .listen(3000, function() {
        console.log("3000端口正在监听中...")
    });

    相关文章

      网友评论

          本文标题:get和post方式请求数据 jsonp

          本文链接:https://www.haomeiwen.com/subject/evgqkxtx.html