快捷導(dǎo)航

jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能示例

更新時間：2019年02月15日 14:22:39 作者：無顛

這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能,結(jié)合實(shí)例形式分析了jQuery的$.ajax方法與后臺php交互實(shí)現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)簡單的Ajax調(diào)用功能。分享給大家供大家參考，具體如下：

這里的jQuery調(diào)用為CDN地址：//cdn.bootcss.com/jquery/3.3.1/jquery.min.js

jQuery確實(shí)方便，下面做個簡單的Ajax調(diào)用：

建立一個簡單的html文件：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    //按鈕單擊時執(zhí)行
    $("#testAjax").click(function(){
       //取Ajax返回結(jié)果
       //為了簡單，這里簡單地從文件中讀取內(nèi)容作為返回?cái)?shù)據(jù)
       htmlobj=$.ajax({url:"/Readme.txt",async:false});
        //顯示Ajax返回結(jié)果
        $("#myDiv").html(htmlobj.responseText);
     });
  });
</script>
</head>
  <body>
    <div id="myDiv"><h2>通過 AJAX 改變文本</h2></div>
    <button id="testAjax" type="button">Ajax改變內(nèi)容</button>
  </body>
</html>

好了，點(diǎn)擊按鈕就可以看到效果了。

當(dāng)然，jQuery的Ajax調(diào)用可以控制項(xiàng)很多，這里演示了簡單的調(diào)用。

注意你自己的jquery引用路徑。

好吧，做一個調(diào)用后臺的例子：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    //按鈕單擊時執(zhí)行
    $("#testAjax").click(function(){
       //Ajax調(diào)用處理
      var html = $.ajax({
        type: "POST",
        url: "test.php",
        data: "name=garfield&age=18",
        async: false
      }).responseText;
      $("#myDiv").html('<h2>'+html+'</h2>');
     });
  });
</script>
</head>
  <body>
    <div id="myDiv"><h2>通過 AJAX 改變文本</h2></div>
    <button id="testAjax" type="button">Ajax改變內(nèi)容</button>
  </body>
</html>

后臺test.php文件代碼：

<?php
  $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
  echo $msg;

當(dāng)然，我們還可以這樣來調(diào)用Ajax:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    //按鈕單擊時執(zhí)行
    $("#testAjax").click(function(){
       //Ajax調(diào)用處理
      $.ajax({
        type: "POST",
        url: "test.php",
        data: "name=garfield&age=18",
        success: function(data){
            $("#myDiv").html('<h2>'+data+'</h2>');
         }
      });
     });
  });
</script>
</head>
  <body>
    <div id="myDiv"><h2>通過 AJAX 改變文本</h2></div>
    <button id="testAjax" type="button">Ajax改變內(nèi)容</button>
  </body>
</html>

注意：

success: function(data)

中的data參數(shù)可以改為別的名稱，比如success: function(msg)，msg(data)為返回的數(shù)據(jù)。此處為回調(diào)函數(shù)的參數(shù)，而非

data: "name=garfield&age=18"

中的Ajax調(diào)用中的data參數(shù)。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: