먼저 JQuery의 Ajax 호출 프로세스를 설명하기 위해 예제를 사용합니다. 구현된 기능 중 하나는 결제 확인 버튼을 클릭한 후 잔액 결제 기능이 구현되는 것입니다. 1. 먼저 호출해야 하는 관련 기능을 PHP 페이지의 버튼에 바인딩합니다. 코드 복사 코드는 다음과 같습니다. </p> <p>$(함수(){</p> <p> $("#pay_btn").bind("click",ABC.balancePay);</p> <p>});<br></p> </div> <p>2. 대본실: </p> <p>$.post 방법을 사용하는 경우: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="84416" class="copybut" id="copybut84416" onclick="doCopy('code84416')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code84416"> <br>var ABC = { <p> BalancePay: 기능(이벤트){</p> <p> event.preventDefault();</p> <p> var tthis = $(event.currentTarget);</p> <p> var form = tthis.parents('form');</p> <p> var url = form.attr('action');</p> <p> var data = 'code=15′ ;// $('#verifyCode').val();</p> <p> var jqXhr = $.post(url, 데이터, 정의되지 않음, 'jsonp');</p> <p> jqXhr.done(함수(데이터){</p> <p> //console.log('콘솔을 통해 인쇄됩니다.') //#4</p> <p> $("#msg").text('결과:' 데이터);</p> <p>});</p> <p>}<br></p> </div> <p>$.post 메소드는 콜백 함수를 직접 지정할 수도 있습니다: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="62390" class="copybut" id="copybut62390" onclick="doCopy('code62390')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code62390"> <br>var jqXhr = $.post(url, 데이터, 함수(데이터){ <p> $("#msg").text('결과:' 데이터);</p> <p>}, 'jsonp');<br></p> </div> <p>$.ajax 방법을 사용하여 다음을 달성합니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="1911" class="copybut" id="copybut1911" onclick="doCopy('code1911')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code1911"> <br>var jqXhr = $.post(url, 데이터, 함수(데이터){ <p> $("#msg").text('결과:' 데이터);</p> <p>}, 'jsonp');<br></p> </div> <p>$.ajax 방법을 사용하여 다음을 달성합니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="83348" class="copybut" id="copybut83348" onclick="doCopy('code83348')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code83348"> <br>var jqXhr = $.ajax({ <p> 유형: '게시물',</p> <p> url: url,</p> <p> 데이터: {코드: '15′},</p> <p> 데이터 유형: 'jsonp',</p> <p> sccuess:함수(데이터){</p> <p> 경고('좋음');},</p> <p> error: function(XMLHttpRequest, textStatus, errorThrown) { // #3 이 오류 함수는 디버깅에 매우 유용합니다. 구문 분석이 잘못된 경우 오류 상자가 나타납니다(XMLHttpRequest.readyState);<br> ; <br>});<br><br></p> <p>3. 서버측: <br> </p> </div> <p></p> <p>코드 복사</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="65595" class="copybut" id="copybut65595" onclick="doCopy('code65595')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code65595"> <br>public function actionInterPayProc($callback) <p>{</p> <p>//header("content-type: text/javascript");</p> <p>//header(‘Content-type: text/html; charset=utf-8′);</p> <p> $code = $_POST['code'];</p> <p> //$code //#1 此处给出一个有语法错误的表达式</p> <p> //echo $code; //#2 此处标记，用于后面调试说明；</p> <p> …</p> <p> $result = 1;</p> <p> //echo $_POST['callback']. ‘(‘ . json_encode($result) . ‘);';//注意使用的编码方式需要和客户端请求保持一致；</p> <p>exit(0);</p> <p>}<br></p> </div> <br><br><strong>调试工具</strong> </u><p>Firefox有强大FireBug 插件，现在比较新的浏览器如 Chrome 和 Safari，以及 IE 8都内置了调试工具，借助于这些调试工具，可以非常详细的查看 Ajax 的执行过程（chrome和firefox中调出调试工具的快捷键是ctrl+shift+c)；<br>以下使用FireBug；</p> <p><br>1.使用firebug，查看回调：</p> <p>对于Ajax方法，是通过异步执行的服务器端程序，如果服务器端出错，在页面上不会显示的，我们需要借助调试工具来查看；例如，将以上示例中#2的注释去掉，触发ajax请求一次，可以在控制台面板中查看到错误的返回结果：<br> </p></a><table border="0" cellspacing="3" cellpadding="0" width="100%"> <tbody> <tr> <td><img id="theimg" onclick="window.open(this.src)" src="http://files.jb51.net/file_images/article/201312/20131202095036.jpg?201311295115" alt="Jquery는 Firefox FireBug 플러그인을 사용하여 Ajax 단계를 디버깅합니다." ></td> </tr> <tr> <td> </td> </tr> </tbody> </table> <p>서버측 프로그램에 오류가 있으면 직접 확인할 수도 있습니다. 오류의 원인은 일반 페이지와 동일하지만 단지 ajax가 반환한 패널에서만 볼 수 있습니다(아무것도 없습니다.) 웹 브라우저 페이지에 표시됩니다). <br>여기서 확인해야 할 변수를 인쇄하기 위해 서버 측에서 echo 및 기타 메소드를 사용하는 경우 콜백 함수의 이름이 변경되었기 때문에 Ajax 호출의 결과가 실패해야 한다는 점에 유의해야 합니다. 변경되었습니다. </p> <p>예를 들어 인쇄된 변수가 333인 경우 최종 콜백 결과는 333ajaxcallbak(1)입니다. 클라이언트가 함수 이름 333ajaxcallbak를 찾고 있으며 이를 구문 분석할 수 없습니다. </p> <p>2. 오류 기능을 사용하여 오류 정보를 인쇄합니다. </p> <p>$.ajax()에는 함수를 지정할 수 있는 오류 매개변수가 있습니다. 이 메소드는 요청이 실패할 때 호출됩니다. 여기에 제공된 정보는 디버깅에 매우 유용합니다. </p> <p>오류: 함수(XMLHttpRequest, textStatus, errorThrown)</p> <p>오류 이벤트에서 반환된 첫 번째 매개변수 XMLHttpRequest에는 몇 가지 유용한 정보가 있습니다. </p> <p>XMLHttpRequest.readyState:</p> <p>반환된 상태 코드는 오류 설명에 해당합니다: </p> <p>상태 코드</p> <p>0 - (초기화되지 않음) send() 메서드가 아직 호출되지 않았습니다. </p> <p>1 - (로드 중) send() 메소드가 호출되었으며 요청이 전송되고 있습니다 </p> <p>2 - (로딩 완료) send() 메소드가 실행되어 모든 응답 내용을 수신했습니다 </p> <p>3 - (대화형) 응답 콘텐츠 구문 분석</p> <p>4 - (완료) 응답 내용 구문 분석이 완료되었으며 클라이언트에서 호출할 수 있습니다 </p> <p>XMLHttpRequest.status:</p> <p>여기에 반환된 상태 코드는 404와 같이 우리가 매일 보는 HTTP 상태입니다. 이는 페이지를 찾을 수 없음을 의미합니다. </p> <p>텍스트상태:</p> <p>"시간 초과", "오류", "수정되지 않음" 및 "파서 오류". </p> <p>(기본값: 자동 판단(xml 또는 html)) 요청 실패 시 호출할 시간입니다. 세 가지 매개변수가 있습니다: XMLHttpRequest 객체, 오류 메시지 및 (선택 사항) 캡처된 오류 객체. 오류가 발생하면 오류 메시지(두 번째 매개변수)에는 null 외에 "timeout", "error", "notmodified" 및 "parsererror"가 포함될 수 있습니다. </p> <p>이 오류 기능을 통해 프로그램 오류를 쉽게 해결할 수 있습니다. </p> <p>예를 들어 위의 #2에서 주석을 제거하는 것은 오류가 있는 콜백 함수 이름을 변경하는 것과 동일하며 다음과 같이 보고됩니다. </p> <p>3. console.log를 사용하여 출력을 인쇄합니다. (alert()도 사용할 수 있습니다) </p> <p>이는 디버깅 경험을 향상시키기 위한 보조 방법일 뿐입니다. js에서 관심 있는 변수를 추적하려면 Alert() 메소드를 통해 출력하면 되지만, 팝업창이 자주 뜨면 짜증이 납니다. console.log는 대안이며, Firebug 플러그인의 방법입니다. console.log에 의해 인쇄된 변수 결과는 Firebug 콘솔 패널에 표시됩니다. </p> <p>오류의 가능한 원인: </p> <p>1. 반환된 결과의 형식이 올바르지 않은 경우, Firebug에서 결과를 볼 수 있습니다. </p> <p>2. JSON 요청의 경우 형식이 엄격합니다. </p> <p>오류 함수를 통해 보고된 오류가 다음과 같은 경우:parsererror</p> <p>가능한 이유는 서버측 스크립트 인코딩 문제입니다. 서버측 처리 기능에서 처리되는 첫 번째 줄에 해당 헤더 정보를 추가할 수 있습니다. </p> <p>예: header('콘텐츠 유형: 텍스트/html; charset=utf-8');</p> <p>물론 형식이 잘못되었을 가능성이 높습니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92298" class="copybut" id="copybut92298" onclick="doCopy('code92298')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code92298"> <br>echo "{'re':'success '}" ;jquery는 <br>echo "{"re":"success"}"를 구문 분석할 수 없습니다. 오류는 발생하지 않습니다<br> </div> <p>이상한 json 형식 문자열을 출력하지 마세요. 그렇지 않으면 jq1.4 버전은 성공 콜백을 실행하지 않습니다. 예를 들어, {abc:1} 또는 {'abc':1}, <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="12188" class="copybut" id="copybut12188" onclick="doCopy('code12188')"><u>을 출력하려면 </u></a></span> 코드를 복사하세요. 다음과 같습니다: </div> <div class="codebody" id="code12188"> <br>{"abc":1} <p>{'success':true}가 {"success":true}로 변경되었습니다.<br></p> </div> <p> </p></span></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
