• 회원가입
  • 로그인
  • 구글아이디로 로그인

[AJAX] JS - AJAX - PHP 아작스 예제 ★ (= 입력제시어 = 입력예제)

작동 메커니즘 

 

1.
입력창에 문자 입력 시, onkeyup 이벤트에 의해 hz() 함수가 실행됨.

 

2.
문자열 길이로 입력 여부 확인 (str.length == 0).

2-1.
입력창이 비어있는 (즉, str.length == 0) 경우라면,
id="txtHint" 요소의 placeholder 내용을 지우고 함수를 종료.

 

2-2.

입력창이 비어있지 않은 (즉, str.length !== 0) 경우라면,

XMLHttpRequest 객체 만들기

서버 응답이 준비되었을 때 실행될 함수를 생성.

요청을 서버의 PHP 파일 (a.php)로 보냄.

q 매개 변수는 입력한 문자열임. (즉,  a.php? q = "+ str)
str 변수는 입력 필드의 내용을 유지

 


b.php

아래 제시어들 입력해보세요.

※ 홈짱닷컴 

※ Homzzang.com

※ 홈페이지 제작 가이드


<p>제안: <span id="txtHint"></span></p> 


<p>First name: <input type="text" id="txt1" onkeyup="hz(this.value)"></p>


<script>

function hz(str) {

  var xhttp;

  if (str.length == 0) { 

    document.getElementById("txtHint").innerHTML = "";

    return;

  }

  xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      document.getElementById("txtHint").innerHTML = this.responseText;

    }

  };

  xhttp.open("GET", "a.php?q="+str, true);

  xhttp.send();   

}

</script>

 


a.php

<?php

$a[] = "홈짱닷컴";

$a[] = "Homzzang.com";


$q = $_REQUEST["q"];


$hint = "";


if ($q !== "") {

  $q = strtolower($q);

  $len=strlen($q);

  foreach($a as $name) {

    if (stristr($q, substr($name, 0, $len))) {

      if ($hint === "") {

        $hint = $name;

      } else {

        $hint .= ", $name";

      }

    }

  }

}


echo $hint === "" ? "제안 없음" : $hint;

?>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012