티스토리 뷰
url : http://jonsuh.com/blog/jquery-ajax-call-to-php-script-with-json-return/
참고 : http://api.jquery.com/jQuery.param/ , http://findfun.tistory.com/399
HTML
<body>
<!--Put the following in the <body>-->
<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
<input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
<input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="submit" name="submit" value="Submit form" />
</form>
<div class="the-return">
[HTML is replaced when successful.]
</div>
</body>
----------------------------------------------------------------------------------------------------------------
response.php
폼에서 주어진 정보를 전달받고 처리되는 위치이다.
이 데모에서는 HTML파일의 동일한 위치에 response.php 파일로 저장하도록 한다.
<?php
if (is_ajax()) {
if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
$action = $_POST["action"];
switch($action) { //Switch case for value of action
case "test": test_function(); break;
}
}
}
//Function to check if the request is an AJAX request
function is_ajax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
function test_function(){
$return = $_POST;
//Do what you need to do with the info. The following are some examples.
//if ($return["favorite_beverage"] == ""){
// $return["favorite_beverage"] = "Coke";
//}
//$return["favorite_restaurant"] = "McDonald's";
$return["json"] = json_encode($return);
echo json_encode($return);
//echo json_encode( "{'label':'serpiko', 'value':100}" ); //순수한 문자열로 표현할때는 이렇게 사용.
}
먼저 Ajax로 부터의 요청이 있었는지 is_ajax() 함수에서 확인한다.
체크된 값은 switch문을 통하여 반복 체크하며 선언된 행동을 할 수 있다.
test함수에서는 $_POST를 $return에 저장하는데, 바뀌지 않은 $_POST 원래의 값을 그대로 가지도록 한다.
$return을 JSON으로 인코딩하는데 $return["json"]에 JSON을 설정해주고, 다음줄에 JSON을 반환합니다.
----------------------------------------------------------------------------------------------------------------
response.php에 의해 반환된 값을 비동기적으로 처리하는 곳이다. head 에 다음을 넣어준다.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Put the following in the <head>-->
<script type="text/javascript">
$("document").ready(function(){
$(".js-ajax-php-json").submit(function(){
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: data,
success: function(data, status, request) {
$(".the-return").html(
"Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
);
}
, error : function(data, status, error) {
alert("Error!!\r\ncode : " + data.status + "\r\nmessage : " + data.reponseText);
}
,beforeSend:function(){
//통신을 시작할때
$('#box').show().fadeIn('slow');
}
,complete:function(){
//통신이 완료된 후 처리
$('#box').fadeOut('slow');
}
});
return false;
});
});
</script>
data는 serialize()메서드를 이용하여 폼 요소 집합을 문자열로 인코딩해준다.
한마디로 서버에 보낼 form데이터를 a=1&b=2&c=3&d=4&e=5 이런식으로 표준형태의 쿼리 스트링을 만들어 내게 되며 한글은 UTF-8방식으로 인코딩이 된다.
여기에 $(this).serialize() + "&" + $.param(data); 라고 되어 있으니 현재 폼(this)의 쿼리 스트링에 &action=test 을 추가하는 형태이다.
만약 위와 같이 submit() 메서드 안에서 사용하는 것이 아니라면 아래와같이
$.ajax({
data:$('#inputForm').serialize() 이렇게 폼을 셀렉터해서 serialize해주면 된다.
역시 $.param(obj)도 메서드 인데 URL쿼리 스트링 혹은 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 해준다. (더보기)
아래와 같이 쿼리스트링을 만들수도 있고 URI-decoded 도 할 수 있습니다.
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
추가로
<div id="results"></div>
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
$("#results").text(str);
결과 : width=1680&height=1050
response.php에서 switch문의 case값에 대해 매칭(반화되는JSON에 대한)되는 동작의 값을 설정하는 곳으로
response.php에 대응하는 기능을 설정하고 추가 조치를 하여 여러 Ajax 스크립트 및 개별 기능을 설정할 수 있다.
폼이 성공적으로 처리될때 success함수를 실행하게 된다.
data["value_name:문자열로된 이름"] 으로 개별 반환된 값에 엑세스 할 수 있다.
예를 들어 좋아하는 음료를 얻기 위해서는, 이름이 favorite_beverage이기 때문에 data["favorite_beverage"]가 된다.
전체 JSON 값의 경우 data['json']으로 데이터를 사용하면 된다.
-----------------------------------
만든 샘플
<!DOCTYPE HTML>
<html lang="ko">
<head>
<title> NewDocument </title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
body {background-color:#FFF}
body #loadingLayer{position:absolute;display:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(".js-ajax-php-json").submit(function(){
var data = {
"action": "img_1",
"label": "labelName",
"event": "eventType",
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: data,
success: function(data, status, request) {
$(".the-return").html(
"전달 받은 이미지경로: " + data["getImgSrc"] + "<br />JSON: " + data["json"]
);
$('#targetImg').attr('src', data["getImgSrc"]);
}
, error : function(data, status, error) {
alert("Error!!\r\ncode : " + data.status + "\r\nmessage : " + data.reponseText);
}
,beforeSend:function(){
//통신을 시작할때
//$('#loadingLayer').show().animate({'opacity':1}, 500);
$('#loadingLayer').show()//.fadeIn('slow');
}
,complete:function(){
//통신이 완료된 후 처리
$('#loadingLayer').fadeOut('slow');
}
});
return false;
});
});
</script>
<div id='loadingLayer'>
<img src='../data/node/loading.gif' />
</div>
<img id='targetImg' src='../data/node/switch_l2_green.png' style="border: none; width: 48px; height: 48px;" />
<!--Put the following in the <body>-->
<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
<input type="hidden" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
<input type="hidden" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
<input type="hidden" name="favorite_hobby" value="" placeholder="Favorite hobby" />
<select name="color">
<option value="green">green</option>
<option value="blue">blue</option>
<option value="gray">gray</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="violet">violet</option>
<option value="yellow">yellow</option>
</select>
<input type="submit" name="submit" value="Submit Ajax+form" />
</form>
<br />
<div class="the-return">
[HTML is replaced when successful.]
</div>
</body>
</html>
'■ 프론트엔드 ■ > AJAX' 카테고리의 다른 글
| ajax 라이브러리 sendRequest-ajax.js (0) | 2018.04.24 |
|---|---|
| 아이디 중복확인 with. 제이쿼리, AJAX (0) | 2015.02.02 |
| 03. 제이쿼리 ajax로 xml 파싱 (0) | 2014.08.28 |
| 03. 제이쿼리 load → JSON데이터 (0) | 2014.08.28 |
| 02. XMLHttpRequest 함수화 - sendRequest(url, param, callback, method, asyncBool) (0) | 2014.08.28 |