jQuery实现简单的Ajax调用功能示例


Posted in jQuery onFebruary 15, 2019

本文实例讲述了jQuery实现简单的Ajax调用功能。分享给大家供大家参考,具体如下:

这里的jQuery调用为CDN地址://cdn.bootcss.com/jquery/3.3.1/jquery.min.js

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"><h2>通过 AJAX 改变文本</h2></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('<h2>'+html+'</h2>');
     });
  });
</script>
</head>
  <body>
    <div id="myDiv"><h2>通过 AJAX 改变文本</h2></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('<h2>'+data+'</h2>');
         }
      });
     });
  });
</script>
</head>
  <body>
    <div id="myDiv"><h2>通过 AJAX 改变文本</h2></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程序设计有所帮助。

jQuery 相关文章推荐
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
采购部部门职责
2013/12/15 职场文书
初中校园广播稿
2014/02/02 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
企业负责人任命书
2014/06/05 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
服务承诺书
2015/01/19 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
三八节祝酒词
2015/08/11 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Redis 常见使用场景
2021/08/30 Redis
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python