> 웹 프론트엔드 > JS 튜토리얼 > JQuery Framework_jquery를 기반으로 한 AJAX 예제 코드

JQuery Framework_jquery를 기반으로 한 AJAX 예제 코드

WBOY
풀어 주다: 2016-05-16 18:42:46
원래의
985명이 탐색했습니다.

index.html

코드 복사 코드는 다음과 같습니다.

>
jQuery Ajax 데모<br> <br><script src="./js/jquery.js" type="text/javascript "><script type="text/javascript"> <BR>$(document).ready(function(){//이것은 jQueryready이며 C 언어의 main과 같습니다. . 작업이 여기에 포함됩니다. <BR>$("#button_login").mousedown(function(){ <BR>login(); //login() 함수는 ID가 "button_login"인 버튼을 클릭한 후 실행됩니다. ; <BR>} ); <BR>}); <BR>function login(){ //함수 login() <BR>var username = $("#username").val();// 상자의 사용자 이름<BR>var 비밀번호 = $("#password").val();//상자의 비밀번호 가져오기<BR>$.ajax({ //Ajax 프로세스<BR>type: "post ", //백엔드와 통신하기 위한 post 메소드 사용<BR>url: "login.php", //이 PHP 페이지와 통신<BR>dataType:'json',//php에서 반환된 값은 JSON으로 해석됩니다. mode<BR>data: 'username= ' 사용자 이름 '&password=' 비밀번호, //php로 전송되는 두 가지 데이터 항목이 있습니다. 즉, u와 p가 위에 전달되었습니다. <BR>success: function(json){//호출이 php 성공<BR>//alert (json.username 'n' json.password); //php에서 반환 값(json.username)에 대해 경고 <BR>$('#result').html("Name :" json.username "< ;br/>Password:" json.password); //미리 정의된 결과 위치 지정자 위치에 PHP의 반환 값을 표시합니다 <BR>} <BR>}); <BR>//$ .post() 메소드: <BR>$('#test_post').mousedown(function (){ <BR>$.post( <BR>'login.php', <BR>{ <BR>사용자 이름:$( '#username' ).val(), <BR>password:$('#password').val() <BR>}, <BR>function (data) //반환 함수<BR>{ <BR>var myjson=' '; <BR>eval('myjson=' data ';') <BR>$('#result').html("이름 1:" myjson.username "<br/>비밀번호 1 :" myjson .password); <BR>} <BR>); <BR>}); <BR>//$.get() 메서드: <BR>$('#test_get').mousedown(function () <BR> { <BR>$.get( <BR>'login.php', <BR>{ <BR>사용자 이름:$('#username').val(), <BR>비밀번호:$('# 비밀번호') .val() <BR>}, <BR>function(data) //반환 함수 <BR>{ <BR>var myjson='' <BR>eval("myjson=" data ";") ; <BR>$('#result').html("Name2:" myjson.username "<br/>Password2:" myjson.password) <BR>} <BR>); ; <BR>} <BR></script> <BR><body> <BR><div id="result" style="배경:orange;border:1px solid red;width:300px;height: 200px;"></div> <BR><form id="formtest" action="" method="post"> <BR><p><span>이름 입력:</span> ;<input type="text" name="username" id="username" /></p> <BR><p><span>비밀번호 입력:</span><입력 유형 ="text" name="password" id="password" /></p> <BR></form><BR><button id="button_login">ajax 제출</button> 🎜><button id="test_post">postsubmit</button> <BR><button id="test_get">getsubmit</button> <BR></body> ; <BR><BR> <BR>login.php <BR><BR></script>


코드 복사
코드는 다음과 같습니다. echo json_encode(array ('username'=>$_REQUEST['username'],'password'=>$_REQUEST['password']))
? >

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿