zoukankan      html  css  js  c++  java
  • jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用:

    建立一个简单的html文件:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
     5 <script type="text/javascript">
     6     $(function(){
     7         //按钮单击时执行
     8         $("#testAjax").click(function(){
     9               //取Ajax返回结果
    10               //为了简单,这里简单地从文件中读取内容作为返回数据
    11               htmlobj=$.ajax({url:"/Readme.txt",async:false});
    12                //显示Ajax返回结果
    13                $("#myDiv").html(htmlobj.responseText);
    14          });
    15     });
    16 </script>    
    17 </head>
    18     <body>
    19         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
    20         <button id="testAjax" type="button">Ajax改变内容</button>
    21     </body>
    22 </html>

    好了,点击按钮就可以看到效果了。

    当然,jQuery的Ajax调用可以控制项很多,这里演示了简单的调用。

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

    好吧,做一个调用后台的例子:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
     5 <script type="text/javascript">
     6     $(function(){
     7         //按钮单击时执行
     8         $("#testAjax").click(function(){
     9               
    10               //Ajax调用处理
    11             var html = $.ajax({
    12                type: "POST",
    13                url: "test.php",
    14                data: "name=garfield&age=18",
    15                async: false
    16 
    17             }).responseText;
    18             $("#myDiv").html('<h2>'+html+'</h2>');
    19          });
    20     });
    21 </script>    
    22 </head>
    23     <body>
    24         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
    25         <button id="testAjax" type="button">Ajax改变内容</button>
    26     </body>
    27 </html>

    后台代码:

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

    现在已经可以从后台来获取数据了!

    当然,我们还可以这样来调用Ajax:

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
     5 <script type="text/javascript">
     6     $(function(){
     7         //按钮单击时执行
     8         $("#testAjax").click(function(){
     9               
    10               //Ajax调用处理
    11             $.ajax({
    12                type: "POST",
    13                url: "test.php",
    14                data: "name=garfield&age=18",
    15                success: function(data){
    16                         $("#myDiv").html('<h2>'+data+'</h2>');
    17                   }
    18             });
    19             
    20          });
    21     });
    22 </script>    
    23 </head>
    24     <body>
    25         <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
    26         <button id="testAjax" type="button">Ajax改变内容</button>
    27     </body>
    28 </html>

    注意,

    success: function(data)

    中的data参数可以改为别的名称,比如success: function(msg),msg(data)为返回的数据。 此处为回调函数的参数,而非

    data: "name=garfield&age=18"

    中的Ajax调用中的data参数。

  • 相关阅读:
    常见的查找算法(七):哈希查找
    常见的查找算法(六):分块查找
    常见的查找算法(五):树表查找之一 ---- 二叉查找树
    让div充满整个body
    display:table的用法
    webpack-dev-server
    webpack--loader
    webpack nodejs npm关系
    js中==和===区别
    vue 的点击事件怎么获取当前点击的元素
  • 原文地址:https://www.cnblogs.com/UniqueColor/p/5765328.html
Copyright © 2011-2022 走看看