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以一种崭新的方式来 ...
随机推荐
- Spring Taco Cloud——design视图的创建(含thymeleaf模板遇到的一些小问题)
先来看下综合前两篇内容加上本次视图的成果 可能不是很美观,因为并没有加css样式,我想等整个项目有个差不多的功能实现后再进行页面优化,请谅解 下面我贴上自己定义修改过的Taco的design视图代 ...
- 项目组件:分页(pagination)
此分页组件可以辅助完成项目中前端页面分页展示 """ 分页组件应用: 1. 在视图函数中 queryset = models.Issues.objects.filter( ...
- HSRP热备份路由协议
HSRP热备份路由协议 案例1:HSRP配置 案例2:三层交换配置HSRP 案例3:STP的配置 案例4:三层交换配置STP 1 案例1:HSRP配置 1.1 问题 在企业网络到外部的连接方案中,要求 ...
- Shell:Day02.笔记
重定向和管道符:1.重定向 程序 = 指令 + 数据 命令 变量 在程序中,数据如何输入?有如何输出? 数据输入:键盘 -- 标准输入,但是并不是唯一输入方式: --std ...
- 最近准备研读thinkphp源码,ctag派上用场了
本人习惯用vim编辑器,这里ctags配置vim很方便. #在ThinkPHP源码目录(假定为/server/thinkphp)执行: $ cd /server/thinkphp $ ctags -R ...
- Scratch2的鸡兔同笼
解题思路鸡兔同笼新算法:已知共有鸡和兔15只,共有40只脚,问鸡和兔各有几只.算法:假设鸡和兔训练有素,吹一声哨,它们抬起一只脚,(40-15=25) .再吹一声哨,它们又抬起一只脚,(25-15=1 ...
- C语言移动一个点
#include"stdio.h"#include"windows.h"#include"conio.h"#define M 3#defin ...
- Go gRPC进阶-TLS认证+自定义方法认证(七)
前言 前面篇章的gRPC都是明文传输的,容易被篡改数据.本章将介绍如何为gRPC添加安全机制,包括TLS证书认证和Token认证. TLS证书认证 什么是TLS TLS(Transport Layer ...
- Python设计模式(11)-状态模式
# coding=utf-8 # *状态模式:一个方法的判断逻辑太长,就不容易修改.方法过长,其本质就是,# * 就是本类在不同条件下的状态转移.状态模式,就是将这些判断分开到各个能# * 表示当前状 ...
- 07-JDBC协议
1.下载mysql-connector-java-8.0.17.jar,jar包放进jmeter的安装目录lib文件夹下,启动jmeter就好 2.新增线程组,然后添加配置元件:JDBC connec ...