Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementieren-PHP开发-php.cn

Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementieren

高洛峰

Freigeben： 2016-12-08 11:15:38

Original

1327 Leute haben es durchsucht

Dieser Artikel implementiert den asynchronen Zugriff und das asynchrone Laden mit AJax von jQuery. Interessierte Freunde können darauf verweisen.

[Asynchroner Zugriff]

Verwenden Sie ein Beispiel zur Veranschaulichung: Klicken Sie auf die Schaltfläche, senden Sie die vom Benutzer in der Eingabe eingegebenen Daten an den Server und geben Sie das Ergebnis zurück zur Seite .

Der erste ist der HTML-Inhalt:

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

Nach dem Login kopieren

Konfigurieren Sie den Server: Server.php

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

Nach dem Login kopieren

ajaxDemo.js implementiert den asynchronen AJax-Zugriff:

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

Nach dem Login kopieren

Implementierungseffekt:

Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementieren

[Asynchrones Laden]

Verwendet hauptsächlich die Methoden load() und getScript(), die erläutert werden mit einem Beispiel. :

Ladet ein vorbereitetes Fragment in eine vorhandene HTML-Datei, zusammen mit einem Popup, das weitere Benutzeraktionen verhindert, bis das Fragment geladen ist.

Der erste ist der vorhandene HTML-Code ohne Inhalt:

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

Nach dem Login kopieren

Erstellen Sie eine js-Datei getData.js und schreiben Sie eine Funktion. Das einfachste Popup Die Box-Eingabeaufforderung ist ein Beispiel. :

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>

Nach dem Login kopieren

Schreiben Sie abschließend main.js, um getData.js und box.htm asynchron in die vorhandene HTML-Datei zu laden.

$(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("片段加载失败"); 
    } 
  }); 
  
})

Nach dem Login kopieren

Endeffekt:

Verwenden Sie AJax von jQuery, um asynchronen Zugriff und asynchrones Laden zu implementieren