<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<div id="show" style="margin: 0 auto;width: 900px;">

		</div>

	</body>

</html>

<script src="jQuery-3.5.1.min.js"></script>

<script>

//页面加载

$(function(){

	//触发ajax

	$.ajax({

		type:"get",

		url:"http://api.k780.com/?app=weather.future&weaId=1&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json",

		dataType:"json",

		success:function(res){

			if(res.success == 1){

				var data = res.result;

				var str = "<table>";

				str += "<th>城市</th>";

				str += "<th>日期</th>";

				str += "<th>温度</th>";

				str += "<th>风向</th>";

				str += "<th>操作</th>";

				for(var i=0;i<data.length;i++){

					str += "<tr><td>"+data[i].citynm+"</td><td>"+data[i].days+"</td><td>"+data[i].temperature+"</td><td>"+data[i].wind+"</td><td><button class='del'>删除</button></td></tr>";

				}

				str+="</table>";

				$("#show").html(str);

				$("tr:odd").css('background-color','red');

				$("tr:even").css('background-color','blue');

				$("tr:eq(0)").css('background-color','');

				$("table").css('border','1px solid red');

			}else{

				console.log('接口请求失败');

			}

		}

	});

	// 删除

	$("#show").on('click','.del',function(){

		var res = confirm('您确定要删除吗？');

		if(res){

			$(this).parent().parent().remove();

		}

	});

})

</script>

　　

jQuery-ajax-天气接口的更多相关文章

  1. jQuery ajax调接口时跨域

    解决方法提炼 一.jsonp方法 在前端ajax配置jsonp参数,在后台配置jsonp设置,具体方法自行百度 二. 参考同源策略 把前端静态页面放在tomcat内webapp下,和后台文件同目录, ...

  2. 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求

    这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Meth ...

  3. c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码，java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法（ajax调用） Linq To Json SqlServer 递归查询

    天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. ​ ​不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...

  4. 关于jquery的$.ajax发接口的同步与异步问题

    1.在使用$.ajax发接口时想对返回数据做一些处理后拿到其他方法中使用 发请求函数如下: function getProjectName(projectId){ project.projectNam ...

  5. 结合vue展示百度天气接口天气预报

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  7. Jquery ajax 学习笔记

    本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里 之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...

  8. 当jquery ajax遇上401请求

    jquery ajax是个很常用接口,而在请求时候,可能存在响应401的情况(身份认证过期或未登录),比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的. ajax请求有两种方式 ...

  9. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  10. [转]JQuery Ajax 在asp.net中使用总结

    本文转自:http://www.cnblogs.com/acles/articles/2385648.html 自从有了JQuery,Ajax的使用变的越来越方便了,但是使用中还是会或多或少的出现一些 ...

随机推荐

  1. 阿里P8整理Mysql面试题答案，助你“脱颖而出”，吊打面试官！（建议收藏）

    前言 作为一名开发人员,每天英高都在和数据库进行着斗智斗勇,尤其是互联网行业,对MySQL的使用是比较多的.同样的,因为mysql的重要性以及普及性,在面试的时候一定是一个面试的重点或者说常问问题,说 ...

  2. 什么是UILabel

    UILabel极其常用,功能比较专一:显示文字 UILabel的常见属性 @property(nonatomic,copy) NSString *text; 显示的文字 @property(nonat ...

  3. linux_5

    1 简述osi七层模型和TCP/IP五层模型 2 总结描述TCP三次握手四次挥手 TCP是一种可靠的,面向连接的全双工传输层协议. TCP连接的建立是一个三次握手的过程.如图所示: 第一次握手:主机A ...

  4. PCI Verilog IP

    1      PCI IP设计 虽然PCI已经逐渐淘汰,但是还是有不少应用需要这样的接口通讯. 设计目的是为了提供基于源码的PCI IP,这样硬件就不必受限于某一个FPGA型号,也方便ASIC迁移.由 ...

  5. Java面向对象之各种变量详解

    在Java中一定有很多变量让大家头疼,成员变量.类变量.局部变量等等,今天就来分别认识认识他们吧! Java面向对象之各种变量详解 前言 在 Java语言中, 根据定义变量位置的不同,可以将变量分成两 ...

  6. Solution -「多校联训」轮回

    \(\mathcal{Description}\)   有 \(n\) 个黑盒,第 \(i\) 个黑盒可以让输入变量以 \(p_i\) 的概率保持不变,以 \(\frac{1-p_i}2\) 的概率加 ...

  7. rust连接oracle数据库遇到DPI-1047: Cannot locate a 64-bit Oracle Client library的解决方案

    这两天要实现一个用rust连接远程的oracle数据库的需求,所以就需要用rust连接oracle. 在github上面找到一个库,地址:https://github.com/kubo/rust-or ...

  8. 常用模块（Day25-Day28）

    模块分为三种: 1.内置模块:python安装时自带的. 2.扩展模块:别人写的,需要安装之后可以直接使用,如django,tornado等. 3.自定义模块:自己写的模块. 序列化模块 序列指字符串 ...

  9. ICLR 2018 | Deep Gradient Compression: Reducing the Communication Bandwidth for Distributed Training

    为了降低大规模分布式训练时的通信开销,作者提出了一种名为深度梯度压缩(Deep Gradient Compression, DGC)的方法.DGC通过稀疏化技术,在每次迭代时只选择发送一部分比较&qu ...

  10. Python中模块的定义及案例

    1 a = '我是模块中的变量a' 2 3 def hi(): 4 a = '我是函数里的变量a' 5 print('函数"hi"已经运行!') 6 7 class Go2: 8 ...