- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Javascript & JavaScript Application angularjs 에서 php 서비스 콜하고 json으로 리턴 받기
2016.07.19 17:29
angularjs 에서 php 서비스 콜하고 json으로 리턴 받기
php 5.3, angular.js
결과를 리턴받고 표시할 INDEX.HTML
화면에 리스트, 입력폼, 버튼을 하나 만들고 화면이 실행되면 데이터를 조회해서 리스트에 표시.
각각 칸에 데이터 입력후에 버튼을 누르면 데이터를 입력.
서버쪽 php는 일반적인 POST방식 처리를 수행하면 된다.
결과를 리턴할때만 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", 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", headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); /* Check whether the HTTP Request is successful or not. */ request.success(function (data) { $scope.message = data; }); }}) |
동작화면
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 9 |
테이블 태그 셀 합치기 그리고, 테이블 안 테이블
 | 졸리운_곰 | 2019.03.23 | 566 |
| 8 | 테이블 컬럼 너비 고정 : Fixed Table Cell Width | 졸리운_곰 | 2019.03.21 | 767 |
| 7 | 포지션 css - position (static, relative, absolute, fixed 차이) | 졸리운_곰 | 2019.03.16 | 496 |
| 6 |
DIV 태그를 이용하여 레이아웃 만들기
| 졸리운_곰 | 2019.02.06 | 806 |
| 5 | HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교 | 졸리운_곰 | 2019.02.04 | 588 |
| 4 |
카드형 디자인/갤러리/리스트 코딩하기.
| 졸리운_곰 | 2018.09.06 | 481 |
| 3 |
[HTML5] span과 div의 차이
| 졸리운_곰 | 2018.06.04 | 800 |
| 2 | HTML div 왼쪽, 오른쪽 배치 | 가을의곰 | 2017.06.10 | 493 |
| 1 |
XPath 이야기
| 졸리운_곰 | 2017.03.20 | 591 |