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 19 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery实现飞机大战小游戏
Jul 05 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 表单数据的获取代码
2009/03/10 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
繁简字转换功能
2006/07/19 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
学历公证委托书
2014/04/09 职场文书
师范类求职信
2014/06/21 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫