[jQuery] jQuery Ajax 전송[jQuery] jQuery Ajax 전송

Posted at 2018. 9. 28. 16:40 | Posted in JavaScript & jQuery/jQuery




#연관내용 : JavaScript AJAX 호출




■ jQuery Ajax 전송예제




-. jQuery Ajax는 비동기 통신을 구현해 주므로 실무에서 많이 사용한다.

-. 해당 포스팅은 무언가의 설명보다 필자가 자주 사용하는 형태를 정리하기위해 작성되었다.




# jQuery.Ajax( ) 메서드의 옵션

옵션 속성 이름

설명

자료형

 async

 · 동기, 비동기를 지정한다.

 Boolean

 complete(jqXHR, textStatus)

 · Ajax 완료 이벤트 핸들러를 지정한다.

 Function

 data

 · 요청 매개변수를 지정한다.

 Object, String

 error(jqXHR, textStatus, errorThrown)

 · Ajax 실패 이벤트 핸들러를 지정한다.

 Function

 jsonp

 · JSONP 매개 변수 이름을 지정한다.

 String

 jsonpCallback

 · JSONP 콜백 함수 이름을 지정한다.

 String, Function

 success(data, textStatus, jqXHR)

 · Ajax 성공 이벤트 핸들러를 지정한다.

 Fuction, Array

 timeout

 · 만료 시간을 지정한다.

 Number

 type

 · 전송방식 'GET' 또는 'POST'를 지정한다.

 String

 url

 · 대상 URL을 지정한다.

 String




# 소스코드① - AJAX 형식으로 데이터 전송

 ajax_get.php

<html>
<head>
<title>:: jQuery Ajax 데이터 전송 ::</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxCommunication(mode) {
        
        jQuery.ajax({
              url : "./ajax_set.php"
            , type : "POST"

            , async : false

            , data : {
                  mode : mode
                , soney : "xperia"
                , apple : "iphone"
                , google : "pixel"
                , microsoft : "surface"
                , samsung : "galaxy"
                , lg : "optimum"
                , xiaomi : "redmi"
            }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    jQuery("#smart > tbody").html(obj.tbody);    
                    alert(obj.message);
                }
            }
        });
    }
</script>
</head>
<body>
    <table id="smart" border="1" width="500px" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
        <thead>
            <tr>
                <th>제조사</th>
                <th>브랜드</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br/>
    <input type="button" onClick="ajaxCommunication('signal');" value="전송"/>
</body>
</html>




# 소스코드- JSON 형태로 데이터를 출력

 ajax_set.php

<?php
$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");
$backUrl = $_SERVER['HTTP_REFERER'];

switch($_POST['mode']) {

    case "signal" :
       

        // $RetVal 라는 배열에 tbody 라는값을 새로 추가한다.


        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>소니</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['soney']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>애플</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['apple']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>구글</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['google']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>MS</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['microsoft']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>삼성</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['samsung']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>LG</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['lg']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>샤오미</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['xiaomi']);
        $RetVal['tbody'] .= "</tr>";
        
        $RetVal['message'] = "제조사별 브랜드를 조회하는데 성공하였습니다.";
        $RetVal['ret'] = "succ";


        print json_encode($RetVal);
        return;

    break;

    default :
    break;
}

header("location:".$backUrl);
?>




# 출력결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기