1、什么是跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

数据接口网站：https://www.nowapi.com/api

2、实例

//引用jQuery

<script type="text/javascript" src="js/jquery.js"></script>

方法一：动态生成整个表格

<body>
请输入城市：<input type="text" id="tid" value="" />
<input type="button" id="btn" value="查询1"/>

<!--生成的表格放在div中  -->

<div id="did"></div>

</body>

<script type="text/javascript">
$(function(){
$('#btn').click(function(){
var loc=$("#tid").val();
console.log(loc)

//只需要把weaid的内容改变就可以查到对应城市天气

//format=json返回json数据类型

//jsoncallback=hundle  执行hundle方法
var url ='http://api.k780.com/?app=weather.future&weaid='+loc+'&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=hundle';
$.getScript(url,function(){
console.log("jsonp done");
});
});

//hundle方法

function hundle(data){

console.log(data);
console.log(data.result);
//表格删除
$('#tableId').remove();
var table=$("<table id='tableId' border='1px'>").appendTo($("#did"));
table.html("<tr><td>日期</td><td>星期</td><td>温度</td></tr>");
$.each(data.result, function(index, e) {
console.log(index + "=" + e.days);
var tr = $('<tr/>');
$('<td>').html( e.days).appendTo(tr);
$('<td>').html(e.week).appendTo(tr);
$('<td>').html(e.temperature).appendTo(tr);
$('#tableId').append(tr);
});
}

});

</script>

方法二：表格在页面生成动态追加行

<body>
请输入城市：<input type="text" id="tid" value="" />

<input type="button" id="btn2"  value="查询2"/>

<table border="1px" id="tableId2">
<tr>
<td>日期</td>
<td>星期</td>
<td>温度</td>
</tr>
</table>

</body>

<script type="text/javascript">

$(function(){

$('#btn2').click(function(){
var loc=$("#tid").val();
console.log(loc)
var url ='http://api.k780.com/?app=weather.future&weaid='+loc+'&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=hundle2';
$.getScript(url,function(){
console.log("jsonp done");
});
});
});

function hundle2(data){
console.log(data);
console.log(data.result);
//除了第一行删除
$('tr:gt(0)').remove();
$.each(data.result, function(index, e) {
console.log(index + "=" + e.days);
var tr = $('<tr/>');
$('<td>').html( e.days).appendTo(tr);
$('<td>').html(e.week).appendTo(tr);
$('<td>').html(e.temperature).appendTo(tr);
$('#tableId2').append(tr);
});
}

</script>

跨域jsonp+jQuery+json+html动态生成表格的更多相关文章

  1. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  2. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  3. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery利用JSON数据动态生成表格

    <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...

  5. JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  6. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  7. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  8. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

随机推荐

  1. 【问题记录】—SignalR连接断线重连

    起因: ASP.NET Core SignalR是一个开源库,可简化向应用添加实时 SignalR Web 功能. 实时 Web 功能使服务器端代码能够立即将内容推送到客户端.(相信大家都用得比较多了 ...

  2. 魔镜魔镜，今天有雨吗？——GitHub 热点速览 v.21.25

    作者:HelloGitHub-小鱼干 上周智能驾驶项目的作者曾经做过一个透明小电视机,同透明电视机类似 MagicMirror 也是一个神奇的智能项目,使用它进行模块定制开发,你将拥有一块非常酷炫的智 ...

  3. 深入理解 sync.Once 与 sync.Pool

    深入理解 sync.Once 与 sync.Pool sync.Once 代表在这个对象下在这个示例下多次执行能保证只会执行一次操作. var once sync.Once for i:=0; i & ...

  4. 使用pdb进行Python调试

    调试应用有时是一个不受欢迎的工作,当你长期编码之后,只希望写的代码顺利运行.但是,很多情况下,我们需要学习一个新的语言功能或者实验检测新的方法,从而去理解其中运行的机制原理. 即使不考虑这样的场景,调 ...

  5. 【春节歌曲回味 | STM32小音乐盒 】PWM+定时器驱动无源蜂鸣器（STM32 HAL库）

    l  STM32通过PWM与定时器方式控制无源蜂鸣器鸣响 l  STM32小音乐盒,歌曲进度条图形显示与百分比显示,歌曲切换 l  编程使用STM32 HAL库 l  IIC OLED界面编程,动画实 ...

  6. 4、nfs服务器的搭建

    4.1.nfs服务介绍: samba服务器一般互联网企业不会使用 nfs服务的端口是不固定的,需要先启动rpc服务对nfs服务端口进行注册 4.2.安装nfs: rpm -qa nfs-utils r ...

  7. bootstrap validate 验证插件 动态添加和动态删除验证项

    //添加验证项 function addField(field, notEmptyMsg, othercon) { if (!othercon) { $("#gyssave").b ...

  8. 什么样的CRM系统适合以客户为中心的企业？

    我们不难发现,现代的企业非常依赖CRM系统,这是因为20%的优质客户能够给企业带来80%的利润,而老客户的推荐可以带来60%的客户增长.那么,什么样的CRM系统适合企业?随着信息技术的发展,客户开始拥 ...

  9. CentOS-Docker搭建MinIO(单点)

    下载镜像 $ docker pull minio/minio 创建相关目录 $ mkdir /home/minio/data /home/minio/config -p 运行镜像(自定义Access和 ...

  10. 增强采样软件PLUMED的安装与使用

    技术背景 增强采样(Enhanced Sampling)是一种在分子动力学模拟中常用的技术,其作用是帮助我们更加快速的在时间轴上找到尽可能多的体系结构及其对应的能量.比如一个氢气的燃烧反应,在中间过程 ...