美文网首页
6.$http服务

6.$http服务

作者: miner敏儿 | 来源:发表于2017-05-27 13:09 被阅读0次

1.把文件夹,创建在服务器的目录当中。

2.在浏览器当中,查看文件
http://localhost/day5-code/

3.到phpstorm当中,进行配置 setting ->deployment

4.点击绿色添加,把文件地址,贴入进去。

Ajax的基本原理复习


image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
设置在浏览器中运行可以直接跳到本机127.0.0.1 或者  location
setting->deployment-> + name:php 随便写->选择Local or menthed
-->
<script>
   /* 向服务器要数据*/
   var xhr = new XMLHttpRequest();
   /*想哪个服务器要请求*/
   xhr.open("get",'zm.php');
   /*开始要数据*/
   xhr.send();
   /*监听服务器有没有把数据给我*/
   xhr.onreadystatechange = function () {
       /*收到了服务器给的数据*/
      if(xhr.readyState == 4 && xhr.status ==200){
          /*responseText 就是服务器给的数据*/
          console.log(xhr.responseText);
      }
   };
</script>
</body>
</html>
image.png

$http服务

$http服务-get请求

没有传递参数的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src=angular.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope","$http",function($scope,$http){
        //以前都是我自己传入数据.现在我从数据库中传入
//        $scope.res="zm";
        $http({
            url:'zm.php',/*请求地址*/
            method:'get',/*请求类型*/
        }).success(function (res) /*res是请求地址中的内容*/ {/*请求成功时,回调*/
            $scope.res=res;
        }).error(function (error){
            console.log(error);
        })
    }])
    /*3.绑定模板*/
    /*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png

get的查询方式的传参方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src=angular.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope","$http",function($scope,$http){
        $http({
            url: 'get.php', /*请求地址*/
            method: 'get', /*q请求类型*/
            params: {
                flag: 'zm' /*一定要与服务器那边的值相同和相等*/
            }
        }).success(function (res) {/*请求成功时,回调*/

            $scope.res = res; //拿到服务器的数据
        }).error(function(error){/*请求失败时,回调*/
            console.log(error);
        })

    }])

    /*3.绑定模板*/
    /*4.绑定控制器*/



</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png
1.url: 'get.php?flag=zm',

 2.params: {
                flag: 'zm'     /*一定要与服务器那    边的值相同和相等*/
            }

$http服务-post请求

post必须得要设置请求头

headers: {'Content-Type':'application/x-www-form-urlencoded' }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src=angular.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope","$http",function($scope,$http){
        $http({
            url: 'post.php', /*请求地址*/
            method: 'post', /*请求类型*/
           headers: {/*
           post必须得要设置请求头
           默认,不加请求头,是以json  Content-Type:application/json;
           charset=UTF-8

           以php为例,post是接收不到json的,所以就会发生错误 {}形式

           post接收的是formData 是key:value形式

           */
               'Content-Type':'application/x-www-form-urlencoded' },
//            data:{
///          *默认是以json形式传递.*/
//                flag: 'zm' /*一定要与服务器那边的值相同和相等*/
//            }

            data:'flag=zm'

        }).success(function (res) {/*请求成功时,回调*/

            $scope.res = res;
        }).error(function(error){/*请求失败时,回调*/
            console.log(error);
        })

    }])

    /*3.绑定模板*/
    /*4.绑定控制器*/

</script>
<body ng-app='app' ng-controller='zmController'>
<p>{{res}}</p>
</body>
</html>
image.png

$http服务-get请求的一个小demo

系统给出的是一个json文件,要使用此文件首先需要转化成php文件格式

image.png image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src=angular.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",'$http',function($scope,$http){
        $http({
            url:'students.php',
            method:'get',
            params:{
                flag:'zm'
            }
        }).success(function(res){
            $scope.students=res;
            //接受服务器的值
        }).error(function(error){
            console.log(error);
        })
    }])

    /*3.绑定模板*/
    /*4.绑定控制器*/

</script>
<body ng-app='app' ng-controller='zmController'>
<ul>
    <li ng-repeat='student in students'>  //遍历服务器的值
    {{student.name}}:{{student.address}}:{{student.age}}
    </li>
</ul>
</body>
</html>
image.png

相关文章

  • 6.$http服务

    1.把文件夹,创建在服务器的目录当中。 2.在浏览器当中,查看文件http://localhost/day5-co...

  • DOM 编程艺术 6-7

    6.数据通信 HTTP协议 HTTP 请求过程:浏览器向服务器端发送一个 HTTP 请求报文,服务器端接到请求报文...

  • task 2 从URL输入到页面展现

    1.DNS解析2.TCP连接3.发送http请求4.服务器处理请求并返回http报文5.返回http报文6.关闭T...

  • JavaScript常用工具方法-6. Http

    6. Http

  • 6. HTTP头部

    6.1 HTTP报文头部 报文头部由几个字段构成 HTTP请求报文 由方法,URI,HTTP版本,HTTP头部字段...

  • $HTTP服务

    简介 Angular提供了http服务与后台做交互,用法简单,让我们看看Angular提供的GET、POS...

  • HTTP服务

    1.HTTP服务访问原理 浏览器看到页面的过程1.DNS解析过程2.建立三次握手过程 客户端 --web服务器建立...

  • http服务

    const fs = require('fs'); const game = require('./game') ...

  • 6.入门:HTTP入门

    什么是HTTP? 在Web应用中,服务器把网页传给浏览器,实际上就是把网页的HTML代码发送给浏览器,让浏览器显示...

  • angularJS $http服务

    //创建一个应用程序 var app=angular.module("myApp",[]); //创建控制器 ap...

网友评论

      本文标题:6.$http服务

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