A-A+

jQuery简单的Ajax调用示例

2017年01月21日 前端设计 评论 11 条 阅读 9 views 次

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>  

后台代码:

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

现在已经可以从后台来获取数据了!当然,我们还可以这样来调用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参数。

11 条留言  访客:11 条  博主:0 条

  1. 刘䶮曌博客

    ajax是一座小山头,一定要拿下

  2. 老金@金博客

    不懂也要硬着头皮留下记号

  3. 科学上网就选我

    一看就明白了。哈哈

  4. 木庄博客

    收藏、备用

  5. 上海已婚交友网

    看不懂,但还是觉得你很厉害。

  6. 淀粉包装秤

    世上最重要的事,不在于我们在何处,而在于我们朝着什么方向走。

  7. 淀粉包装秤

    不要等到人生垂暮,才想起俯拾朝花,且行且珍惜

  8. 两对半

    2017大年初一,祝鸡年吉祥,春节快乐

  9. 不套路网赚

    纯干货分享啊,谢谢博主,以后需要再来参考

  10. directadmin授权

    jQuery简单的Ajax调用示例,都是一些非常简单的知识,容易理解运用

  11. PHP程序员雷雪松

    不错的jQuery教程!

给我留言