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. Spring Taco Cloud——design视图的创建(含thymeleaf模板遇到的一些小问题)

    先来看下综合前两篇内容加上本次视图的成果   可能不是很美观,因为并没有加css样式,我想等整个项目有个差不多的功能实现后再进行页面优化,请谅解 下面我贴上自己定义修改过的Taco的design视图代 ...

  2. 项目组件:分页(pagination)

    此分页组件可以辅助完成项目中前端页面分页展示 """ 分页组件应用: 1. 在视图函数中 queryset = models.Issues.objects.filter( ...

  3. HSRP热备份路由协议

    HSRP热备份路由协议 案例1:HSRP配置 案例2:三层交换配置HSRP 案例3:STP的配置 案例4:三层交换配置STP 1 案例1:HSRP配置 1.1 问题 在企业网络到外部的连接方案中,要求 ...

  4. Shell:Day02.笔记

    重定向和管道符:1.重定向 程序 = 指令 + 数据        命令   变量  在程序中,数据如何输入?有如何输出?  数据输入:键盘 -- 标准输入,但是并不是唯一输入方式:    --std ...

  5. 最近准备研读thinkphp源码,ctag派上用场了

    本人习惯用vim编辑器,这里ctags配置vim很方便. #在ThinkPHP源码目录(假定为/server/thinkphp)执行: $ cd /server/thinkphp $ ctags -R ...

  6. Scratch2的鸡兔同笼

    解题思路鸡兔同笼新算法:已知共有鸡和兔15只,共有40只脚,问鸡和兔各有几只.算法:假设鸡和兔训练有素,吹一声哨,它们抬起一只脚,(40-15=25) .再吹一声哨,它们又抬起一只脚,(25-15=1 ...

  7. C语言移动一个点

    #include"stdio.h"#include"windows.h"#include"conio.h"#define M 3#defin ...

  8. Go gRPC进阶-TLS认证+自定义方法认证(七)

    前言 前面篇章的gRPC都是明文传输的,容易被篡改数据.本章将介绍如何为gRPC添加安全机制,包括TLS证书认证和Token认证. TLS证书认证 什么是TLS TLS(Transport Layer ...

  9. Python设计模式(11)-状态模式

    # coding=utf-8 # *状态模式:一个方法的判断逻辑太长,就不容易修改.方法过长,其本质就是,# * 就是本类在不同条件下的状态转移.状态模式,就是将这些判断分开到各个能# * 表示当前状 ...

  10. 07-JDBC协议

    1.下载mysql-connector-java-8.0.17.jar,jar包放进jmeter的安装目录lib文件夹下,启动jmeter就好 2.新增线程组,然后添加配置元件:JDBC connec ...