jquery ajax_jquery를 기반으로 한 사용자 새로 고침이 아닌 로그인 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

Ajax 프레임워크는 Ajax 기능의 모듈식 구현을 제공하는 모음입니다. Ajax 프레임워크는 다양한 언어로 구현될 수 있습니다(예: SAJAX는 jquery의 일부일 뿐입니다). >예제 1

코드 복사 코드는 다음과 같습니다. $.ajax({ type:'post',/ /Optional get url:'action.php',//데이터를 받는 PHP 프로그램입니다. data:'data='dsa',//전달된 데이터 PHP에서는 여러 매개변수가 & dataType:'text'로 연결됩니다. //서버에서 반환되는 데이터 유형은 XML, Json jsonp 스크립트 html 텍스트 등이 될 수 있습니다. success:function(msg){ //Ajax 제출 성공 후의 PHP 프로그램은 다음과 같습니다. 반환된 데이터 처리 함수는 msg이고, 데이터 유형은 dataType 매개변수에 정의되어 있습니다. }, error:function( ){ Ajax 제출 실패 처리 기능! >})

PHP action.php

코드 복사 코드는 다음과 같습니다. echo 'www.jb51.net!' ?> 다음은 새로 고침을 하지 않은 jquery ajax 사용자 로그인 예시입니다

예제 2

코드 복사

코드 jQuery Ajax 데모 $(문서). Ready(function(){//jQueryready입니다. C와 같습니다. 기본 언어의 모든 작업이 포함되어 있습니다. $("#button_login").mousedown(function(){ login(); //login() 함수는 ID가 "button_login"인 버튼을 클릭한 후 실행됩니다. }) function login(){ //Function login(); var 사용자 이름 = $("#username").val();//상자에서 사용자 이름 가져오기 var 비밀번호 = $("#password").val();//상자에서 비밀번호 가져오기 $.ajax({ //Ajax 프로세스 type: "post", //포스트 모드에서 백엔드와 통신 url: "login.php", //이 PHP 페이지와 통신 dataType :'json', //php에서 반환된 값은 JSON 모드로 해석됩니다. data : 'username=' 사용자 이름 '&password=' 비밀번호, //php로 전송되는 데이터 항목은 u와 p 두 가지입니다. 위 success: function(json){//php 호출이 성공한 경우 //alert(json.username 'n' json.password) //다음에서 반환 값(json.username)에 대해 경고합니다. php $('#result').html("Name:" json .username " Password:" json.password) //미리 정의된 결과 위치 지정자 위치에 PHP의 반환 값을 표시합니다. } }); //$ .post() 메소드: $('#test_post').mousedown(function (){ $.post( ' login.php', { 사용자 이름:$( '#username').val(), 비밀번호:$('#password').val() }, 함수(데이터) //반환 함수 { var myjson='' eval('myjson=' data ';') $('#result').html(" 이름 1:" myjson.username " 비밀번호 1:" myjson.password); } ); }); //$.get() 메소드: $('#test_get').mousedown(함수 ( ) { $.get( 'login.php', { 사용자 이름:$('#username ').val(), password:$(' #password').val() }, function(data) //반환 함수 { var myjson=' '; eval("myjson=" data "; "); $('#result').html("이름 2:" myjson.username " 비밀번호 2:" myjson .password); } } 이름 입력:

p> 비밀번호 입력:

> ajax 제출 게시물 제출 get 제출

php 코드

코드 복사

코드는 다음과 같습니다:

echo json_encode(array ('username'=>$_REQUEST[ '사용자 이름'],'비밀번호'=>$_REQUEST[ '비밀번호'])); jquery ajax 사용 시 장단점 분석

장점 작고, 압축된 코드는 20k가 조금 넘습니다(비압축 코드는 94k). Selector 및 DOM 작업의 편의성: mootools의 Element.Selectors.js, CSS Selector, XPath Selector와 비교한 jQuery의 Selector(1.2 이후 삭제됨) Chaining: 항상 연속적으로 작동할 수 있는 jQuery 객체를 반환합니다. 문서는 완전하고 사용하기 쉬우며(각 API에는 현재 다른 프레임워크와 비교할 수 없는 완전한 예제가 있음) 인터넷에 다른 많은 문서와 책이 있습니다. Google 코드도 jQuery를 사용하는 등 널리 사용됩니다.

jQuery를 활용한 사이트: http://docs.jquery.com/Sites_Using_jQuery 핵심 개발팀 및 핵심 인력: John Resig 등 간결하고 짧은 구문으로 기억하기 쉽습니다. 확장성: 사용 가능한 사용자 개발 플러그인이 많이 있습니다(http://jquery.com/plugins/) jQuery UI(http://jquery.com/plugins/, jQuery 기반) , 그러나 Core jQuery는 독립적임) 지속적으로 개발되고 있습니다. 친절하고 활발한 커뮤니티: google 그룹: http://docs.jquery.com/Discussion 단일 addEvent 대신 클릭과 같은 이벤트 처리를 위한 편리한 방법이 많이 있습니다.

단점 디자인 아이디어가 효율성과 단순성을 추구하는 것이기 때문에 객체지향 확장이 없습니다. 디자인 아이디어는 Mootools와 다릅니다. CSS Selector가 조금 느립니다(그러나 지금은 속도가 크게 향상되었습니다).