当前位置:首页 > jQuery技术文章 > jQuery学习笔记之 Ajax操作篇(一) - 数据加载

jQuery Ajax数据加载知识点总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:94

这篇文章主要知识点是关于jQuery、Ajax、数据加载、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

加载 HTML

我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为:

<div></div>
<button>load</button>

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

同目录下的 test.html 文件内容为:

<span>test</span>

我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上:

 $('button').click(function() {
  $('div').load('test.html');
 });

点击按钮后:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

加载 JSON

JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示和传输数据,它规定键和值都必须包含在双引号内,且函数为非法 JSON 值。

{
  "name": "stephenlee", 
  "sex": "male"
}

将上述 JSON 数据保存在 test.json 文件内。我们可以使用 getJSON 方法加载 JSON 数据,同样将其绑定在按钮的点击事件上:

 $('button').click(function() {
  $.getJSON('test.json');
 });

由于 getJSON 方法是作为 jQuery 的全局对象而定义的,因此这里需要使用 $ 来调用该方法。这里的 $ 指的是全局 jQuery 对象,而不是 $() 所指的个别 jQuery 对象。因此我们也称 getJSON 函数为全局函数。
但我们会发现上述代码只是获取了 JSON 数据,但看不出任何效果,这里我们可以使用 getJSON 方法的第二参数作为回调函数来测试效果:

 $('button').click(function() {
  $.getJSON('test.json', function(data) {
   console.log(data);
   $.each(data, function(index, content) {
    console.log(content);
   })
  });
 });

点击按钮后,我们来看下 console 内的输出:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

这里的 each 函数的第一个参数可以接收数组或对象,第二个参数为值回调函数,将每次循环中数组或对象的当前索引和值做为参数。

加载 JS

有时候我们不希望在页面初次加载时就加载所有的 JS 文件,而是动态地根据需求来加载,假设当前目录下有一个 JS 文件,内容为一个简单的 alert:

$(function() {
 alert('test');//
})

我们可以使用全局函数 getScript 来加载该文件,同样绑定到按钮的点击事件上:

 $('button').click(function() {
  $.getScript('test.js');
 });

点击按钮后,加载 test.js 文件,并成功触发 alert。

加载 XML

对 XML 的加载操作与 JSON 类似,因为 XML 文档的作用也是与数据存储相关,在同目录下创建 text.xml 文件,内容为:

<person>
<name>stephenlee</name>
<sex>male</sex>
</person>

加载 XML 文档可以直接使用 get 方法,为什么看上去像一个默认方法,这个可以根据 AJAX 的全称看出端倪 - Asynchronous JavaScript And XML。
同样将其绑定在按钮点击事件上:

 $('button').click(function() {
  $.get('test.xml', function(data) {
    console.log(data);
  });
 });

查看 console 结果为:

jQuery学习笔记之 Ajax操作篇(一) - 数据加载

这里需要注意,如果 XML 文档内的格式错误,虽然不会报错,但是将无法执行回调函数。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

jQuery基本过滤选择器的用法代码

关于jQuery的选择器中的通配符使用方法

怎样利用python求解物理学中的双弹簧质能系统

如何理解Python匿名函数

总结jQuery关键词说明插件cluetip使用指南

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.720337

基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 《————HTML————》 //thinkphp循环显示把data里fid赋予多选框volist name="data" id="vo"tr tdinput type="checkbox" value="{$vo.fid}"//td//可在后面加td输入参数 /tr/volisttrth width="80"input type="checkbox" id="all"/全选/thth width="80"input type="button" value="全选" class="btn" id="selectAll" //thth width="80"input type="button" value="全不选" class="btn" id="unSelect" //ththinput type="button" value="反选" class="btn" id="reverse" //th th width="180" a href="javascript:void(0);" rel="external nofollow" onclick="del()" title="删除选定数据"删除/a/th /tr 《————jsvascript————》 script //多选 $("#all").click(function(){ if(this.checked){ $("#list :checkbox").attr("checked", true); }else{ $("#list :checkbox").attr("checked", false); } }); //当点到全选按钮 $("#selectAll").click(function () { $("#list :checkbox,#all").attr("checked", true); });……

网友NO.724277

JQuery中使用ajax传输超大数据的解决方法

直接说问题,在一个页面用了Jquery(1.6)的Ajax请求,用的post,传递显示的数组有500多条.php端却只能接受到50条左右。刚开始以为是web服务器设置的问题,把,max_upload_size这类的都改了。但是没有效果,后来尝试用max_input_vars这个是新玩艺,刚开始还有点作用。后来,客户的数据超过2000的时候,还是一样,php端还是不能完全接受到ajax发送过来的数据。最后,在国外的一网站上,找到了解决方案。 在post发送前,将要发送的变量用JSON.stringify处理下,就ok了.JSON.stringify是什么呢???请移步这里://www.jb51.net/article/29893.htm ……

网友NO.757545

JQuery Ajax动态加载Table数据的实例讲解

我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据。 select id="type" name="type" onchange="reloadTable(this)"/selecttable id="import-table" class="table table-striped table-bordered table-hover" width="100%"/table table第一次加载数据的function定义如下: function loadData() { var c = 'labelinput type="checkbox" id="checkbox1" class="ace" onchange="javascrpt:selectAll(this);"/span class="lbl"/span/label'; $('#import-table').DataTable({ ajax: { url: '%=request.getContextPath()%' + "../../../hot/getByCode.action?code=APP", type: "post", dataType: "json", data: {} }, "scrollCollapse": true, ordering: false, visible: true, api: true, serverSide: true, columns: [{ "data": "id", "class": "center", "width": "80px", "name": "importId", orderable: false, "title": c, "render": function(a, b, c, d) { return getColumnReturnStr("checkbox", c.id, "importId") } }, { "data": "name", "title": "名称" }, ], "dom": "'row''col-sm-6'l'co……

网友NO.730880

解决jquery的ajax调取后端数据成功却渲染失败的问题

获取后端数据后,进行前端的页面渲染,数据读到了,渲染却失败了,经过无数次排查,发现了问题: 主要问题就是id的唯一性 $("#id")一般可以获得相应的对象,但是如果此时页面有多个同样的id,jquery就不行了,肯定不能查找到相应的对象 综述来说,如果渲染不成功,首先考虑要绑定数据的对象找没找到,此时必须看看id是否唯一了。 以上这篇解决jquery的ajax调取后端数据成功却渲染失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.484869

jQuery通过ajax快速批量提交表单数据

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据。 请看下面的表单: form id="fm" table tr td姓名/td td input type="text" name="name" / /td /tr tr td年龄/td td input type="text" name="age" / /td /tr tr td密码/td td input type="password" name="password" / /td /tr tr td性别/td td input type="radio" name="sex" value="male" /男 input type="radio" name="sex" value="female" /女 /td /tr tr td地区/td td select name="area" option value="heping"和平区/option option value="nankai"南开区/option option value="xiqing"西青区/option option value="hexi"河西区/option /select /td /tr tr td爱好/td td input type="checkbox" name="hobby[]" value="movie" /电影 input type="checkbox" name="hobby[]" value="music" /音乐 input type="checkbox" name="hobby[]" value="basketball" /篮球 /td /tr tr td个人介绍/td td textarea name="intro" /textarea /……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757