免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何在jQuery中調用Ajax

今天就跟大家聊聊有關如何在jQuery中調用Ajax，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

創新互聯公司是一家朝氣蓬勃的網站建設公司。公司專注于為企業提供信息化建設解決方案。從事網站開發，網站制作，網站設計，網站模板，微信公眾號開發，軟件開發，小程序制作，十年建站對成都三維植被網等多個方面，擁有多年建站經驗。

建立一個簡單的html文件：

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

好了，點擊按鈕就可以看到效果了。

當然，jQuery的Ajax調用可以控制項很多，這里演示了簡單的調用。

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

好吧，做一個調用后臺的例子：

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

后臺test.php文件代碼：

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

當然，我們還可以這樣來調用Ajax:

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

注意：

success: function(data)

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

data: "name=garfield&age=18"

中的Ajax調用中的data參數。

看完上述內容，你們對如何在jQuery中調用Ajax有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。

分享名稱：如何在jQuery中調用Ajax
文章鏈接：http://m.newbst.com/article46/jicjeg.html

成都網站建設公司_創新互聯，為您提供響應式網站、電子商務、用戶體驗、服務器托管、域名注冊、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

手機網站建設