Use jQuery's AJax to implement asynchronous access and asynchronous loading-PHP开发-php.cn

Use jQuery's AJax to implement asynchronous access and asynchronous loading

高洛峰

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

Original

1312 people have browsed it

This article implements asynchronous access and asynchronous loading using jQuery's AJax. It has certain reference value. Interested friends can refer to it.

【Asynchronous Access】

Use an example to illustrate: click the button, send the data entered by the user in the input to the server, and return the result to the page.

The first is the html content:

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

Copy after login

Configuration server: Server.php

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

Copy after login

ajaxDemo.js implements AJax asynchronous access:

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

Copy after login

Achieve the effect:

Use jQuerys AJax to implement asynchronous access and asynchronous loading

【Asynchronous Loading】

Mainly use the load() method and getScript() method, specifically explained with an example:

Load a prepared fragment in the existing html file, and in the fragment A popup that prevents the user from further action until loading is complete.

The first is the existing html code without any content:

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

Copy after login

Draw a js file getData.js and write a simple pop-up box prompt for the function as an example:

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>

Copy after login

Finally write main.js to load getData asynchronously. js and box.htm into the existing html file.

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

Copy after login

Final effect:

Use jQuerys AJax to implement asynchronous access and asynchronous loading