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以一种崭新的方式来 ...
随机推荐
- sNews1.7在wamp上的部署及运行
安装前的准备 Apache Server 必须开启 mod_rewrite 模块 MySQL 数据库版本在 4.x以上 PHP: >= 4.x 并且 <=5.6 1.我使用的是wampse ...
- DALI 48V驱动
DALI-CC-30W-48V技术手册 产品名称:DALI-CC-30W-48V 支持协议:IEC 62386-101:2018,IEC 62386-102:2018,IEC 62386-207:20 ...
- Flutter 实现虎牙/斗鱼 弹幕效果
老孟导读:用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理 弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的 ...
- Git应用详解第四讲:版本回退的三种方式与stash
前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...
- 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图
一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...
- Android | 教你如何在安卓上实现二代身份证识别,一键实名认证
@ 目录 前言 场景 开发前准备 android studio 安装 在项目级gradle里添加华为maven仓 在应用级的build.gradle里面加上SDK依赖 在AndroidManifest ...
- Windows线程+进程通信
一 Windows线程进程 1)定义 按照MS的定义, Windows中的进程简单地说就是一个内存中的可执行程序, 提供程序运行的各种资源. 进程拥有虚拟的地址空间, 可执行代码, 数据, 对象句柄集 ...
- Spring IoC getBean 方法详解
前言 本篇文章主要介绍 Spring IoC 容器 getBean() 方法. 下图是一个大致的流程图: 正文 首先定义一个简单的 POJO,如下: public class User { priva ...
- [php] 猴子偷桃
<?php /* 10:五只猴子采得一堆桃子,猴子彼此约定隔天早起后再分食. 不过,就在半夜里,一只猴子偷偷起来,把桃子均分成五堆后, 发现还多一个,它吃掉这桃子,并拿走了其中一堆.第二只猴子醒 ...
- Springboot:员工管理之首页(十(2))
访问首页可以通过两种方式: 1:编写controller 2:自定义扩展视图解析器(推荐使用) 1:编写Controller com\springboot\controller\IndexContro ...