Communicate the value of an input field on the server by Ajax
이번에 만들 프로그램은 이름을 입력하고 엔터키를 치면 이것이 서버로 전달되고 그 이름이 response 되는 겁니다. 우리는 그 response를 화면에 뿌려 줄 겁니다. 서버와의 커뮤니케이션이 양방향으로 원활히 이루어 지는 것을 보실 수 있을 겁니다.
Transmit by Ajax the name entered
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
Name : <input type=text /> <br />
</div>
</div>
</body>
</html>
<script>
$("input").bind ("change", function (event)
{
var name = $(this).val ();
$.ajax (
{
url : "action.php",
data : { name : name },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
}
});
});
</script>
예제를 보시면 change event를 사용해서 서버로 name 을 전달한 것을 보실 수 있습니다. 이 name 이 변경됐을 경우만 server 는 response 할 겁니다. server 는 window에 append
(response)를 사용해서 insert 된 것만 response 할 것이기 때문입니다.
action.php file
<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>
이름을 몇개 입력하면 아래와 같은 화면을 보실 수 있을 겁니다.
action8.php
tistory460_01.html
Display the server's response in a new window
response를 받아서 같은 window에 insert 하는 것 보다 새로운 윈도우에 한번 display 해 볼까요.
Display a new window containing the server response
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content 1 </p>
Name : <input type=text /> <br />
</div>
</div>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content 2 </p>
</div>
</div>
</body>
</html>
<script>
$("input").bind ("change", function (event)
{
var name = $(this).val ();
$.ajax (
{
url : "action.php",
data : { name : name },
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#win2 div:jqmData(role=content)").append (response);
$.mobile.changePage ($("#win2"));
}
});
});
</script>
action.php file
<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>
field에 값을 넣고 change event가 나오면 Ajax call 이 만들어지고 두번째 window 가 나타납니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
|---|---|
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |