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网页加载进度条的实现
Jun 01 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现穿梭框效果
Jan 19 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
php json转换相关知识(小结)
2018/12/21 PHP
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python中如何设置代码自动提示
2020/07/15 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
JPA的特点
2014/10/25 面试题
会计应届生的自荐信
2013/12/13 职场文书
结婚典礼证婚词
2014/01/11 职场文书
大学军训感言1500字
2014/03/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python