zoukankan      html  css  js  c++  java
  • 跨域jsonp+jQuery+json+html动态生成表格

    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>

  • 相关阅读:
    Programming WCF Services作者序
    《软件设计精要与模式》书评
    Programming WCF Services翻译笔记(九)
    检验团队是否敏捷的四个标准
    Programming WCF Services翻译笔记(八)
    Oracle BIEE (Business Intelligence) 11g 11.1.1.6.0 学习(3)创建一个简单的分析
    oracle express 11g 创建表空间
    vmware8安装win2008 r2后找不到网卡驱动的解决办法
    javascript:巧用eval函数组装表单输入项为json对象
    javascript:二叉搜索树 实现
  • 原文地址:https://www.cnblogs.com/wangxue1314/p/11951729.html
Copyright © 2011-2022 走看看