8 HTML&JS等前端知识系列之Ajax的例子
what is ajax ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
例子1-跨域请求
跨域请求的要求请看下面：
你的web页面的js代码必须满足以下2点要求：
- 发送格式必须是jsonp。
- 函数名：告诉对方用什么函数名来返回数据，通过jsonCallback来设置。
服务器端的要求：
- 返回的数据必须是这样的格式：函数名("OK")，比如list(jsonp)，这个函数名是双方协商的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax跨域</title>
</head>
<body>
<input value="获取节目" type="button" onclick="ajaxrequest()">
<div id="content"></div>
<script src="jquery-2.2.3.js"></script>
<script type="text/javascript">
function ajaxrequest() {
$.ajax({
url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", // 定义要和哪个url交互数据
type:'GET', // 定义使用什么方法向服务器发送请求
dataTyep:"jsonp", // jsonp是说我请求数据的时候会告诉服务器，返回数据的时候要使用我给你的函数名去包裹数据
jsonp:'callback', // 对方根据这个键来取值，请看下面
jsonCallback:'list', // 服务器返回数据的时候使用，告诉我们的ajax去用什么函数名解析数据
// callback + list就等于 (callback:list) 这样的键值对。这样对方直接根据callback来取值了。
sucess: function (data) { // 执行成功调用这个方法，方法内容自定义
$.each(date.date,function(i){
var item = data.data[i];
console.log(item);
var str = "<p>" + item.week +"</p>>";
})
},
error: function (data) { // 执行失败调用这个方法,方法内容自定义
alert("have some error!!")
}
})
}
</script>
</body>
</html>
例子2-本域的ajax例子
// 完整的ajax例子
function get_status_usage(){
disk_data = [];
$.ajax({
url: "{% url 'get_status_data'%}",
type: 'POST',
dataType: 'json',
data: {'host_id':$('#host_id').text()},
success: function(callback){ // 自定义函数内容了，我这里的你可以忽略。
console.log(callback);
callback_copy = callback
if( callback.disk_usage_a_hour){
for(disk in callback.disk_usage_a_hour){
disk_data.push(callback.disk_usage_a_hour[disk])
}
}
console.log('disk_data',disk_data);
return disk_data
}, // end sucess func
error: function(err_info){
alert('error:',err_info)
}
}); // end ajax
}
8 HTML&JS等前端知识系列之Ajax的例子的更多相关文章
- 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求
我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...
- 3 HTML&JS等前端知识系列之javascript的基础
preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...
- 8 HTML&JS等前端知识系列之jquery的自定义方法
preface 有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子.先说说2种自定义方法的区别: 不跟在选择器后面的 跟在选择器后面的. 那下面说说如何自定义jquer ...
- 5 HTML&JS等前端知识系列之jquery基础
preface jquery其实就是对javascript的再次封装,方便我们开发者调用,下载地址是:http://jquery.com/download/ ,下面就说说常用使用方法 选择器 基本选择 ...
- 4 HTML&JS等前端知识系列之Dom的基础
preface 主要聊聊dom的编程,包含下面的内容: what's the dom dom选择器 innerText 替换或写入文本 value 获取input,select,textarea的值 ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- 大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app
大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...
- JS前端知识模块大全
公司前端:小胖提供,表示感谢 1. 基础 HTML, CSS, JS 文档 W3CSCHOOL: http://www.w3schools.com/ MDN: https://developer.mo ...
- 前端知识复习： JS选中变色
前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...
随机推荐
- Visual Studio 2013 Update 2 RTM 发布
今天,微软再Visual Studio Blog发布了开放Visual Studio 2013 Update 2 RTM 下载的文章. 原来安装RC版本的同志们可以直接安装,提供在线安装和ISO下载安 ...
- There is insufficient system memory to run this query 错误
服务器环境大致情况如下: 操作系统: Microsoft Windows Server 2003 R2 Enterprise Edition Service Pack 2 数据库 : Mic ...
- PHP笔记（CSS篇）
HTML常用于在网页中显示内容,当然,还可以是布局,但是比较不方便,所以,引进了CSS CSS全称Cascading Style Sheets,中文名:层叠样式表 帮助文档:CSS.chm 作用:布局 ...
- char_dev.c 添加中文注释
char_dev.c里的中文注释,仅代表个人理解,仅供参考.如有错误之处,请指出,谢谢! /* * linux/fs/char_dev.c * * Copyright (C) 1991, 1992 L ...
- 部署私有Docker Registry和使用
环境 vmware虚拟机 Ip:192.168.190.139 Ip:192.168.190.140 Ip:192.168.0.122 registry Docker 1.12.2 Docker 版本 ...
- Android 手势操作识别
(转自:http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1020/448.html) 首先,在Android系统中,每一次手势交互都会依照 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- Facebook不相信所谓的员工能力等级。《长效商业英雄》（《哈佛商业评论》2016年11期），4星。
老牌管理杂志.本期我给4星.以下是书中一些信息的摘抄: 1:爱因斯坦曾说:“任何傻瓜都能让事情更复杂,只有天才能让事情变简单.”单就这一点来看,乔布斯无疑是天才中的天才.#137 2:通过让苹果聚焦于 ...
- 【2016-10-16】【坚持学习】【Day7】【建造者模式】
建造者模式: 一个复杂的对象由多个分部件组成.一个复杂对象 class Product { private string partA; //定义部件,部件可以是任意类型,包括值类型和引用类型 priv ...
- BZOJ 3112: [Zjoi2013]防守战线 [单纯形法]
题目描述 战线可以看作一个长度为n 的序列,现在需要在这个序列上建塔来防守敌兵,在序列第i 号位置上建一座塔有Ci 的花费,且一个位置可以建任意多的塔,费用累加计算.有m 个区间[L1, R1], [ ...