Javascript & JavaScript Application angularjs 에서 php 서비스 콜하고 json으로 리턴 받기

2016.07.19 17:29

졸리운_곰 조회 수:645

angularjs 에서 php 서비스 콜하고 json으로 리턴 받기

 

php 5.3, angular.js

결과를 리턴받고 표시할 INDEX.HTML

 

화면에 리스트, 입력폼, 버튼을 하나 만들고 화면이 실행되면 데이터를 조회해서 리스트에 표시.

각각 칸에 데이터 입력후에 버튼을 누르면 데이터를 입력. 

서버쪽 php는 일반적인 POST방식 처리를 수행하면 된다. 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

결과를 리턴할때만 json_encoder를 수행하면 된다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
 
<head>
    <title>연습파일</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script src="angular.js"></script>
    <script src="myService.js"></script>
 
    <link rel="stylesheet" href="angul.css">
</head>
 
 
    <div class="mainContainer" data-ng-app="myApp">
        <h1>Example</h1>
 
        <div data-ng-controller="search_ctrl">
         
            <input type="text" data-ng-model="val1">
             
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>이름</th>
                        <th>전화번호</th>
                        <th>메모</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="row in rows | filter:val1 | orderBy:'DEV_NAME' | limitTo: 10">
                        <td>{{row.DEV_NAME}}</td>
                        <td>{{row.DEV_TEL}}</td>
                        <td>{{row.DEV_MEMO}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div data-ng-controller="insert_ctrl">
            <input type="text" data-ng-model="key_name">
            <input type="text" data-ng-model="key_tel">
            <input type="text" data-ng-model="key_memo">
            <hidden type="text" data-ng-model="message">
            <button data-ng-click="insertValue()">insert</button>
            <hr>
            {{message}}
        </div>
    </div>
        
 

myService.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* use strict */
var app = angular.module("myApp", []);
 
app.controller("search_ctrl", function ($scope, $http)
{
    var request = $http({
        method: "post",
        url: "http://yours php url",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
 
    /* Check whether the HTTP Request is successful or not. */
    request.success(function (data) {
        $scope.rows = data;
    });
})
 
app.controller("insert_ctrl", function ($scope, $http){
     
    $scope.insertValue = function () { 
        var request = $http({
            method: "post",
            url: "http://yours php url" + $scope.key_name + "&" + $scope.key_tel,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
 
        /* Check whether the HTTP Request is successful or not. */
        request.success(function (data) {
            $scope.message = data;
        });
    }
})
 
동작화면

 

 

 

[출처] http://bananamandoo.tistory.com/80

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED