<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
#loading{
    width:80px;
 height: 20px;
 background:#bbb;
 color:#000;
 display:none;
}
#resText11
{
   border::solid 1px red;
  
   width:100px; font-size:14px;
}
img{border:0;height:100px;width:100px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
 <!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script>
   $(function()
   {
       //demo1:
        $('#send1').click(function() 
  {
                      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
       function(data)
       {
           $("#resText1").empty();
        $.each(data.items, function( i,item )
        {
        $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
        if ( i == 3 ) 
        { 
         return false;
        }
           });
               }
      ); 
       });
      //demo2:
    $("#send2").click(function()
     {
   $.get("get1.asp", 
           { 
      username :  $("#username").val() , 
      content :  $("#content").val()  
     }, function (data, textStatus)
     {
                        $("#resText2").html(data); // 把返回的数据添加到页面上
     }
   );
    })
      //共用这2个全局的ajax事件
    $("#loading").ajaxStart(function()
    {
       $(this).show();
    $("#resText11").hide();  
    $("#resText11").html(" "); 
    });
    $("#loading").ajaxStop(function()
    {
         $(this).hide();
   $("#resText11").show();
   $("#resText11").html("图片加载成功");
    });
   })
</script>
</head>
<body>
<br/>
<div id="loading">加载中.......</div>
<br/>
Demo1:
<br/>
<input type="button" id="send1" value="加载"/>
<div id="resText1" ></div>
<div id="resText11" ></div>

<br/>
Demo2:
<br/>
<form id="form1">
<p>评论:</p>
 <p>姓名: <input type="text" name="username" id="username" /></p>
 <p>内容: <textarea name="content" id="content" ></textarea></p>
 <p><input type="button" id="send2" value="提交"/></p>
</form>
<div  class='comment'>已有评论：</div>
<div id="resText2" >
</div>

</body>
</html>

get1.asp

<%@ codepage=65001%>
<% 
dim username,content
username=request.QueryString("username")
content=request.QueryString("content")
response.Write("<div class='comment'><h6> "&username&" :</h6><p class='para'> "&content&" </p></div>")

%>

JQuery+ajax数据加载..........的更多相关文章

  1. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  2. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  3. jquery ajax局部加载方法介绍

    [导读] 在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考.例 代码如下复制代码 $ ...

  4. jquery ajax异步加载table的方法

    //显示详细信息 function showInfo(actionId, type) { $.post("Sys_Ajax/Sys_EmployInfo.ashx", { &quo ...

  5. vue.js + ajax 数据加载（纯新手get）

    似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...

  6. RE：通过移动端滑动手势实现数据加载

      背景:         基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...

  7. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  8. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  9. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

随机推荐

  1. Dynamic Ambient Occlusion and Indirect Lighting

    This sample was presented on the Nvida witesite, which detail a new idea to calculate the ambient oc ...

  2. iOS7下Status Bar字体颜色修改

    原文来自这里:iOS7下Status Bar字体颜色修改. 旧项目在iOS7上遇到status bar字体颜色需要修改的问题,症状如下:导航栏设置为黑色后,iphone上status bar的字体颜色 ...

  3. CSS实现图片等比例缩小不变形

    <img src="../images/bg1.jpg" alt="" /> img { /*等宽缩小不变形*/ /*width: 100%;*/ ...

  4. 浅谈vue,小程序，react基础绑定值

    最近一直在用react开发项目,碰见的问题千千万,很多,但是都殊途同源,唯一区别大的就是没有像vue的双向绑定,也没有小程序的单向方便,比如: vue   v-modal="msg" ...

  5. mybatis调用存过程返回结果集和out参数值

    Mapper文件: 1.配置一个参数映射集,采用hashMap对象 2.使用call调用存储过,其中in out等标识的参数需要有详细的描述,例如:mode,JavaType,jdbcType等 &l ...

  6. python__PIP : 安装第三方库

    pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.hustunique.com/  华中理工大学 http://pypi.sdutlinux.o ...

  7. Java核心技术36讲----------谈谈final、finally、finalize有什么不同

    一.final 1.final修饰方法时,需要注意的点: #final修饰方法时,之前的第二个原因是效率.但是如果方法过于庞大,可能看不到内嵌调用带来的任何性能提升.在最近的Java版本中,不需要使用 ...

  8. Hive--关联表（join）

    在hive中,关联有4种方式: 内关联:join on 左外关联:left join on 右外关联:right join on 全外关联:full join on 另外还有一种可实现hive笛卡儿积 ...

  9. 利用 Python 插件 xlwings 读写 Excel

    Python 通过 xlwings 读取 Excel 数据 去年底公司让我做设备管理,多次委婉拒绝,最终还是做了.其实我比较喜欢技术.做管理后发现现场没有停机率统计,而原始数据有,每次要自己在Exce ...

  10. Canvas在移动端设备上模糊出现锯齿边

    在绘制的过程中画布内容的实际大小是根据 canvas 的 width 与 height 属性设置的,而 style 或者CSS设置的width 与 height 只是简单的对画布进行缩放. canva ...