首頁 > 文章 > php教程 > 用jQuery的AJax實現非同步存取、非同步加載

用jQuery的AJax實現非同步存取、非同步加載

高洛峰原創: 2016-12-08 11:15:381287瀏覽

本篇文章實現了用jQuery的AJax實現異步訪問和異步加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

【非同步存取】

用一個範例用以說明：點選按鈕，將input內使用者輸入的資料傳送給服務端，並將結果傳回給頁面。

首先是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 "参数错误";
}

實現效果：

【非同步載入】

主要用到load()方法以及getScript()方法,具體以一個例子說明：用jQuery的AJax實現非同步存取、非同步加載

在現有html檔案中載入一個擬好的片段，以及在片段載入完成之前阻止使用者進一步操作的彈出框。

首先是現有html程式碼，無任何內容:

$(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("服务器正在维护")
    })
  })
})

擬一個js檔案getData.js寫一個函數最簡陋的彈出框提示為例：

<!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>

最後寫main.js來非同步載入getData. js以及box.htm到現有html檔。

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>

最後效果：

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery圖片切換動畫特效下一篇：jQuery圖片切換動畫特效

看更多

用jQuery的AJax實現非同步存取、非同步加載

相關文章