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 技术的更多相关文章

  1. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  2. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  3. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  4. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  5. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  6. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  7. ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...

  8. Ajax 技术一

    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...

  9. AJAX技术的核心

    //创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 /** * 获取XmlHttpRequest对象 */ function getXMLHttpRequ ...

  10. 你真正的了解Ajax?Ajax技术简述

    Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

随机推荐

  1. sNews1.7在wamp上的部署及运行

    安装前的准备 Apache Server 必须开启 mod_rewrite 模块 MySQL 数据库版本在 4.x以上 PHP: >= 4.x 并且 <=5.6 1.我使用的是wampse ...

  2. DALI 48V驱动

    DALI-CC-30W-48V技术手册 产品名称:DALI-CC-30W-48V 支持协议:IEC 62386-101:2018,IEC 62386-102:2018,IEC 62386-207:20 ...

  3. Flutter 实现虎牙/斗鱼 弹幕效果

    老孟导读:用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理 弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的 ...

  4. Git应用详解第四讲:版本回退的三种方式与stash

    前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...

  5. 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...

  6. Android | 教你如何在安卓上实现二代身份证识别,一键实名认证

    @ 目录 前言 场景 开发前准备 android studio 安装 在项目级gradle里添加华为maven仓 在应用级的build.gradle里面加上SDK依赖 在AndroidManifest ...

  7. Windows线程+进程通信

    一 Windows线程进程 1)定义 按照MS的定义, Windows中的进程简单地说就是一个内存中的可执行程序, 提供程序运行的各种资源. 进程拥有虚拟的地址空间, 可执行代码, 数据, 对象句柄集 ...

  8. Spring IoC getBean 方法详解

    前言 本篇文章主要介绍 Spring IoC 容器 getBean() 方法. 下图是一个大致的流程图: 正文 首先定义一个简单的 POJO,如下: public class User { priva ...

  9. [php] 猴子偷桃

    <?php /* 10:五只猴子采得一堆桃子,猴子彼此约定隔天早起后再分食. 不过,就在半夜里,一只猴子偷偷起来,把桃子均分成五堆后, 发现还多一个,它吃掉这桃子,并拿走了其中一堆.第二只猴子醒 ...

  10. Springboot:员工管理之首页(十(2))

    访问首页可以通过两种方式: 1:编写controller 2:自定义扩展视图解析器(推荐使用) 1:编写Controller com\springboot\controller\IndexContro ...