2019년 8월 2일 기본 AJAX 검색

< HTML > 
    < 메타 캐릭터 = "UTF-8" /> 
    < 선두 > < 타이틀 >搜索页</ 타이틀 > </ 헤드 > 
    < 본문 > 
        < 입력 유형 = "텍스트" ID = "사용자 _ 데이터" /> < 버튼 의 onclick = "검색 ()" >百度一下</ 버튼 > 
        < DIV ID = "리스트" > </ DIV > 

    </ 바디 >
</ HTML > 
< 스크립트타입 = "텍스트 / 자바 스크립트" > 
    기능 검색 () {
         // 경보 (1.) 
        VAR 사용자 _ = document.getElementById를 ( ' 사용자 _ ' ) .Value; //는 텍스트 박스의 값을 수신 
        IF 합니다 (_ 데이터 == '' ) 
        { 
            document.getElementById를 ( ' 목록 ' ) .innerHTML = " 비어 있지 " ; 
        } 그렇지 않으면 {
         // ; 경고합니다 (사용자 _) 
        var에 XHR =  새로운 새로운 는 XMLHttpRequest ();//은 기본 Ajax를 도입 
        @ 하며 CONSOLE.LOG (XHR) 
        (xhr.open " POST " , " sou.php " , true로 ) 
        
        xhr.setRequestHeader ( ' 컨텐츠 형 ' , ' 파일을 application / x-www-형상 - urlencoded를 ' ) 

        xhr.onreadystatechange =  함수 () {
             // CONSOLE.LOG (xhr.readyState) // 상태 모니터 출력 
            // CONSOLE.LOG (xhr.responseText) // 값 
            VAR의 CD =     xhr.responseText 단계;
             VAR E =JSON.parse (CD);
            VAR의 STR =  " <표> <제> ID </ 일> 이름 </ 일> <제> 이메일 </ 일> <제> " ;
            대 ( VAR I = 0  에서 E) { 
                STR + = " <TR> <TD> " + E [I]를 .ID + " </ TD> <TD> " + E [I] .name을 + " </ TD > <TD> " + E [I] .email + " </ TD> </ TR> " ;; 
            document.getElementById를 ( " 리스트 " ) .innerHTML = STR; 
        } 
        위해 xhr.send ( " 데이터 = " + _ 데이터); 
    } 
} 

</ 스크립트 >

 

PHP 코드 :

<? PHP는
     $ 데이터 =   $ _POST [ '데이터' ];
    $ DSN = "MySQL은 : 호스트 = 127.0.0.1, 포트 = 3306; 문자셋 = UTF8, DBNAME = 뉴스" ;
    $의 PDO = 새로운 PDO ( $의 DSN , "루트", "루트" );
    $의 SQL = "* 뉴스에서 어디 이름 '%의 같은 선택 $ 데이터 %'" ;
    $ 고해상도 = $ PDO -> 쿼리 ( $의 SQL );
    $ 행 = $ 입술 -> fetchALL (PDO :: FETCH_ASSOC);
    에코 로 json_encode ( $ 행 );
?>

 

요청 요약을 얻을 사용 

1. 객체 아약스 만들기

2, 상태 변경 이벤트 처리기를 바인딩 듣고 아약스

3, HTTP 요청의 설립

4 HTTP 요청을 전송

 

포스트 방법 요청 헤더를 사용하는 경우 설정해야합니다

xhr.setRequestHeader ( '콘텐츠 유형', '애플리케이션 / x-www-form-urlencoded를');