Phaser/jQuery AJAX

jQuery AJAX example

cwisky 2019. 1. 19. 19:08

jQuery의 AJAX 를 사용한 서버측 PHP 간의 비동기 요청과 응답처리 예


jQuery 설정 및 테스트

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>HTML Example</title>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

});

</script>

</head>

<body>

    <p>여기를 클릭하세요

</body>

</html>



위의 방법보다 더 간단하게 jQuery 의 ready 함수를 실행하는 방법

<script>

$().ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

});

</script>

가장 간단한 jQuery ready 함수 호출 방법

$(function(){

  $("p").click(function(){

    $(this).hide();

  });

});


jQuery의 AJAX 기능을 사용한 서버측(PHP)과의 비동기 통신

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>AJAX Example</title>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

$().ready(function(){

  $("p").click(function(){

    $(this).hide();

    $.ajax(

        {

            url : 'server.php',

            data : {name:'smith', phone:'010-9578-2154'},

            dataType : 'json',               /*html, text, json, xml, script*/

            method : 'post',

            success : function(res){

                alert(res.name + ', '+res.phone);

                $('p').show();

            },

            error : function(xhr, status, error){

                alert(xhr.status);           // 에러코드(404, 500 등)

                alert(xhr.responseText); // html 포맷의 에러 메시지

                alert(status);                // 'error'

                alert(error);                 // 'Not Found'

            }

        }

    );

  });

});

</script>

</head>

<body>

    <p>AJAX Request Test

</body>

</html>



위의 요청에 응답하는 서버측 PHP 스크립트(server.php)

<?php

    $name = $_REQUEST['name'];

    $phone = $_REQUEST['phone'];

    

    $arr['name'] = $name;

    $arr['phone'] = $phone;

    

    $json_str = json_encode($arr);

    echo $json_str;

?>