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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 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
PHP中路径问题的解决方案
2006/10/09 PHP
十天学会php之第三天
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP 图片上传代码
2011/09/13 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python调用私有属性的方法总结
2020/07/24 Python
python实现扫雷游戏的示例
2020/10/20 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
主管竞聘书范文
2014/03/31 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers