专栏首页wfacebossAjax Step By Step1

Ajax Step By Step1

Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。

jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。

第一.【.load()方法】

参数的使用step by step(load 有三个(URL +data+callback) +  type )

 (1)如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。

 //HTML   展示的页面(我们可见的部分)
<input type="button" value="异步获取数据"/> 
<div id="box"></div>
//jQuery
 $('input').click(function()
{ 
$('#box').load('test.html'); // test.html 是一个url路径 此时仅仅是载入数据
});
 //test.html 内容
<html>
<head>
<body>
    <div>
  <span>我是异步加载数据时需要的内容,我在另一个界面</span>
     </div>
</body>
</head>
</html>

(2)如果是服务器文件。一般不仅需要载入数据(url),还需要向服务器提交数据,那么我们就可以使用第二个可选参数 data。。向服务器提交数据有两种方式:get 和 post。

    (2.1)不传递 data,则默认 get 方式.

 $('input').click(function()
{ 
$('#box').load('test.php?url=www.ww');
 })

     (2.2)传递 data 用来在服务器端做判断

$('input').click(function()
{
$('#box').load('test.php',
{ 
url:'www.www' 
});
});
//post 方式接受的 服务器端

注:test.php 是和服务器端交互的路径,可更加自己的要求配置。

(3)Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。

回调函数 也可以传递三个可选参数:

    responseText(请求返回)、

    textStatus(请求状态)、

    XMLHttpRequest (XMLHttpRequest 对象)。

$('input').click(function()
{ $('#box').load('test.php(和服务器交互的路径)',
{ 
url:'www.www' 
},function(response,status,xhr)//回调函数
{ 
alert('返回的值为:'+response+',状态为:'+status +', 状态是:'+xhr.statusText);//用于调试查看,在页面上打印出来
 }); 
});

总结:::总结:.load()方法有三个参数::url,data,callback

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (10/24) 图片跳坑大战--处理html中的图片

    该种方式在启动服务后还需自己访问相关url,这很不友好。此处我们新增一些配置,保证在我们启动服务后自动访问url并渲染,配置如下:

    wfaceboss
  • flask系列三之Jinja2模板

    (1)如果只有一个或者少量参数,直接在render_template函数中添加关键字参数就可以了。

    wfaceboss
  • c#面向对象基础5

    当给字符串重新赋值时,老值没有被销毁,而是重新开辟了一块新的空间去储存新值《------------------堆中,在栈中地址发生变化重新指向新值所处空间的地...

    wfaceboss
  • 大规模异步新闻爬虫【4】:实现一个同步定向新闻爬虫

    前面,我们先写了一个简单的百度新闻爬虫,可是它槽点满满。接着,我们实现了一些模块,来为我们的爬虫提供基础功能,包括:网络请求、网址池、MySQL封装。

    一墨编程学习
  • python破解知乎爬虫技术架构

    去年自己开发了一个知乎爬虫系统,我现将整个技术思路和架构整理出来分享给大家,希望对大家有帮助。

    孔雀
  • 【一起学python】实现简单爬虫功能

    在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材。   我们最常规的做法就是通...

    程序员互动联盟
  • 如何用Python 编写知乎爬虫?So easy!

    在爬虫系统中,待抓取 URL 队列是很重要的一部分。待抓取 URL 队列中的 URL 以什么样的顺序排列也是一个很重要的问题,因为这涉及到先抓取那个页面,后抓取...

    IT派
  • python爬虫入门实战!爬取博客文章标题和链接!

    爬虫有什么用呢?举个最简单的小例子,你需要《战狼2》的所有豆瓣影评。最先想的做法可能是打开浏览器,进入该网站,找到评论,一个一个复制到文本中,保存,翻页,接着复...

    白玉无冰
  • HTML5应用 + Cordova = 平台相关的混合应用

    Jerry之前的一篇文章 SAP Fiori应用的三种部署方式 曾经提到SAP Fiori应用的三种部署方式:

    Jerry Wang
  • Python爬虫| 实战爬取腾讯视频评论

    根据上图,我们可以知道:评论使用了Ajax异步刷新技术。这样就不能使用以前分析当前页面找出规律的手段了。因为展示的页面只有部分评论,还有大量的评论没有被刷新出来...

    Python进击者

扫码关注云+社区

领取腾讯云代金券