jQuery の AJax を使用して非同期アクセスと非同期読み込みを実装する-PHP开发-php.cn

jQuery の AJax を使用して非同期アクセスと非同期読み込みを実装する

高洛峰

リリース： 2016-12-08 11:15:38

オリジナル

1285 人が閲覧しました

この記事は、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 を作成し、例として関数の単純なポップアップボックスプロンプトを作成します:

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>

ログイン後にコピー

最後に main.js を作成しますgetData を既存の HTML ファイルに非同期的にロードします。

すごい

最終効果:

jQuery の AJax を使用して非同期アクセスと非同期読み込みを実装する