- 전체
- 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
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 11 | [jQuery] Ajax 기본 사용법 | 졸리운_곰 | 2018.08.03 | 719 |
| 10 | jQuery selector,jQuery 셀럭터, jQuery 선택자 | 졸리운_곰 | 2018.07.29 | 731 |
| 9 |
jQuery 스타일 & 속성 다루기
 | 졸리운_곰 | 2018.07.29 | 790 |
| 8 | Force redraw on an element (jQuery) | 졸리운_곰 | 2018.07.28 | 639 |
| 7 | 자바스크립트에서 변수에 문자열이 있는지 체크 하는 방법 | 졸리운_곰 | 2018.06.05 | 775 |
| 6 | [jQuery] ajax 콜백함수에서 파라메터 패싱 : Pass variable to function in jquery AJAX success callback | 졸리운_곰 | 2018.06.05 | 443 |
| 5 | JQUERY – ON 을 알아보자 | 졸리운_곰 | 2018.06.04 | 450 |
| 4 | 동적으로 생성된 button의 값 가져오기! | 졸리운_곰 | 2018.06.04 | 785 |
| 3 |
jQuery 스타일 & 속성 다루기
| 졸리운_곰 | 2017.08.25 | 597 |
| 2 | remove-innerhtml-from-div 태그 안의 html코드 삭제 | 졸리운_곰 | 2017.07.08 | 633 |
| 1 | [jQuery] Ajax의 흐름과 예제 | 졸리운_곰 | 2017.01.17 | 632 |