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实现图片轮播器
May 23 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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与javascript对多项选择的处理
2006/10/09 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Python实现图片滑动式验证识别方法
2017/11/09 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
微信营销策划方案
2014/02/24 职场文书
我的理想演讲稿
2014/04/30 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA