집 >php教程 >PHP开发 >jQuery의 AJax를 사용하여 비동기 액세스 및 비동기 로드 구현

jQuery의 AJax를 사용하여 비동기 액세스 및 비동기 로드 구현

高洛峰원래의: 2016-12-08 11:15:381328검색

이 기사는 jQuery의 AJax를 사용하여 비동기 액세스와 비동기 로딩을 구현합니다. 관심 있는 친구가 참조할 수 있습니다.

[비동기 액세스]

예를 사용하여 설명합니다. 버튼을 클릭하고 사용자가 입력에 입력한 데이터를 서버로 보내고 결과를 반환합니다. 페이지로.

첫 번째는 html 콘텐츠입니다.

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>AJax异步访问</title>
  <script src="js/jquery-2.1.3.min.js"></script>
  <script src="js/ajaxDemo.js"></script>
</head>
<body>
<input type="text" id="nameValue">
<br/>
<button id="btn">提交</button>
<p>
  结果：<span id="result"></span>
</p>
</body>
</html>

서버 구성: Server.php

<?php
if(isset($_GET[&#39;name&#39;])){
  echo "姓名：".$_GET[&#39;name&#39;];
}else{
  echo "参数错误";
}

ajaxDemo.js는 AJax 비동기 액세스를 구현합니다.

$(document).ready(function(){
  $("#btn").on("click",function(){
    //在与服务器通讯较慢时给用户提示信息
    $("#result").text("数据请求中，请稍后...");
    //向服务器发送请求(get、post)
    $.get("Server.php",{name:$("#nameValue").val()},function(data){
      $("#result").text(data);
    }).error(function(){
      //当服务器出现异常时
      $("#result").text("服务器正在维护")
    })
  })
})

구현 효과 :

jQuery의 AJax를 사용하여 비동기 액세스 및 비동기 로드 구현

[비동기 로딩]

주로 load() 메소드와 getScript() 메소드를 사용하며 이에 대해 설명한다. 예를 들어:

조각이 로드될 때까지 추가 사용자 작업을 방지하는 팝업과 함께 기존 html 파일에 준비된 조각을 로드합니다.

첫 번째는 내용이 없는 기존 html 코드입니다.

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>AJax异步加载</title> 
  <script src="js/jquery-2.1.3.min.js"></script> 
  <script src="js/main.js"></script> 
</head> 
<body> 
  
</body> 
</html>

js 파일 getData.js를 작성하고 가장 간단한 팝업을 작성합니다. box 프롬프트가 그 예입니다. :

function getData(){ 
  alert("片段的内容引自新浪体育"); 
} 
拟一个片段box.htm，承载要加载的片段内容：
<div> 
  <h4>中超-耿晓峰失误拉蒙两球 申花7轮首败1-4绿城</h4> 
  <p> 
    北京时间8月11日晚19点35分，2015年中超联赛第22轮在杭州黄龙体育场开始一场较量， 
    由杭州绿城迎战上海申花。上半场第7分钟陈柏良突然冷射，导致耿晓峰接球脱手造成失球， 
    这是中华台北球员（陈昌源在比利时土生土长）在中超联赛进的首球。 
    第12分钟申花队吕征禁区右路左脚凌空射门扳平比分。第25分钟阿甘在底线附近把球送入禁区， 
    拉蒙头球得分，第37分钟阿甘单刀赴会打入一球。 
    第60分钟阿甘头球摆渡，拉蒙跟进射门梅开二度。最终杭州绿城4比1战胜上海申花。 
  </p> 
</div>

마지막으로 getData.js 및 box.htm을 기존 html 파일에 비동기적으로 로드하도록 main.js를 작성합니다.

$(document).ready(function(){ 
  //异步加载js文件 
  $.getScript("js/getData.js").complete(function(){ 
    getData(); 
  }) 
  //异步加载片段 
  $("body").text("加载中...") 
  $("body").load("box.htm",function(url,status,c){ 
    if(status=="error"){ 
      $(this).text("片段加载失败"); 
    } 
  }); 
  
})

최종 효과:

jQuery의 AJax를 사용하여 비동기 액세스 및 비동기 로드 구현

성명：

이전 기사：jQuery 이미지 전환 애니메이션 효과다음 기사：jQuery 이미지 전환 애니메이션 효과

jQuery의 AJax를 사용하여 비동기 액세스 및 비동기 로드 구현

관련 기사