ajax 技术
ajax 技术
$.ajax({
url:"",
type:'GET',
success:function(data){
console.log(data);
},
error:function(err){
}
})
$.ajax({
url:'',
type:'POST',
data:{
key:value
},
success:functoon(data){
}
})
$(function () {
$.ajax({
url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
type:'post',
success:function (data) {
console.log(data);
var code = data.HeWeather6[0].now.cond_code; //104
$('ul').html(`<li>
<img src="https://cdn.heweather.com/cond_icon/${code}.png" alt="">
</li>`)
},
error:function (err) {
console.log(err);
}
})
})
$.ajax({
url: "https://www.luffycity.com/api/v1/course_sub/category/list/",
type: 'get',
async:false,
beforeSend:function(){
console.log('请求还开始')
$('p').show(300);
},
dataType:'json',
success: function (res) {
$('p').hide(300);
// console.log(res);
var categorys = res.data;
let catrgory = {
"id": 0,
"name": "全部",
"category": 0
};
categorys.unshift(catrgory);
console.log(categorys)
}
})
发送post 请求
// 发送 post
$.post(url, {'data':123}, function (res) {
// 回调函数
console.log(res.data);
}, 'json');
原生jsXHR对象
1.创建对象 var xhr = new XMLHttpRequest();
2.连接 xhr.open('GET',url,true)
3.发送数据 xhr.send()
4.回调 xhr.onreadystatechange = fn
xhr.readyState
。0-为初始化:对象已经建立,单位初始化,open方法还未调用;
。1-初始化:对象已经建立,但还未调用send方法发送请求;
。2-发送数据:send方法已调用,但HTTP头未知;
。3-数据传输中:已经接受部分数据,但响应不完全;
。4-完成:数据接受完成,此时才可以获取完整的返回数据
和风天气
$(function () {
function getWeather() {
$.ajax({
url: 'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
type: 'post',
success: function (data) {
console.log(data);
var code = data.HeWeather6[0].now.cond_code; //104
$('ul').html(`<li>
<img src="https://cdn.heweather.com/cond_icon/${code}.png" alt="">
</li>`)
},
error: function (err) {
console.log(err);
}
})
}
getWeather();
setInterval(function () {
getWeather();
},1000*3);
})
转载于:https://www.cnblogs.com/zhang-zi-yi/p/10800441.html
ajax 技术的更多相关文章
- 使用ajax技术实现txt弹出在页面上
使用ajax技术实现txt弹出在页面上 使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax技术详解
Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- ajax 技术和原理分析
ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...
- Ajax 技术一
一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...
- AJAX技术的核心
//创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 /** * 获取XmlHttpRequest对象 */ function getXMLHttpRequ ...
- 你真正的了解Ajax?Ajax技术简述
Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...
随机推荐
- 为什么Swift和Python要抛弃++\--?
简单好用的++.-- 说到自增(++)\自减(--)运算符,小伙伴们应该都不会陌生,在很多编程语言的代码中,都经常出现它们的身影. 比如常用的for语句 for (int i = 0; i < ...
- vs中出现CL.exe已退出的情况总结
1.函数具有返回值 在定义时没有加上返回值 2.使用未初始化的内存 比如 #include<stdio.h> int main() { int a; printf("%d&quo ...
- 多线程之旅(Task 任务)
一.Task(任务)和ThreadPool(线程池)不同 源码 1.线程(Thread)是创建并发工具的底层类,但是在前几篇文章中我们介绍了Thread的特点,和实例.可以很明显发现局限性 ...
- Centos下载新版内核
下载新版内核的安装文 ...
- Mac下Web切图常用PS快捷命令
Mac下 Z 放大镜 双击放大镜 图片会回到100%大小 C 切片工具 B 画笔 alt 在B模式下 吸取颜色 M 选区(默认) 点击第二次M 矩形选区 可以固定大小 shift+c ...
- 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解
webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...
- 最小生成树算法【图解】--一文带你理解什么是Prim算法和Kruskal算法
假设以下情景,有一块木板,板上钉上了一些钉子,这些钉子可以由一些细绳连接起来.假设每个钉子可以通过一根或者多根细绳连接起来,那么一定存在这样的情况,即用最少的细绳把所有钉子连接起来. 更为实际的情景是 ...
- CSS躬行记(5)——渐变
渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种.渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求, ...
- k8s~helm镜像版本永远不要用latest
对于容器编排工具k8s来说,你可以使用它规定的yaml格式的脚本,使用客户端kubectl来与k8s进行通讯,将你定义好的yaml部署脚本应用到k8s集群上,而这对yaml脚本一般来说都是很像的,就是 ...
- 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter
先说两句 上一讲 「Vuex 到底是个什么鬼」,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨).如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄 ...