<!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. ORACLE_HOME_LISTNER is not SET, unable to auto-start Oracle Net Listener

    执行$ORACLE_HOME/bin/dbstart 启动数据库提示如下: [oracle@prim bin]$ ./dbstart ORACLE_HOME_LISTNER is not SET, u ...

  2. vector 定义的二维数组的遍历

    之前我们分享了STL的一些容器,再介绍vector中只介绍了二维的vector的定义并没有说二维的vector怎么遍历,那么我们今天就来看下二维的vector怎么遍历 看下面的代码吧. #includ ...

  3. linux下的学习之路下的小困难

    centos下源码安装python3wget --no-check-certificate https://www.python.org/ftp/python/3.6.2/Python-3.6.2.t ...

  4. 附件上传——mysql blob类型的数据（springboot）1

    作为一个初出茅庐的菜鸟,这几天做了一下附件的上传与下载,附件文件存储在mysql中,数据类型为blob.在此做一下总结.望指正. 一.先总结附件的上传.(实质是将文件传到controller,后处理成 ...

  5. ethereum(以太坊)(实例)--"简单的公开竞拍"

    说真的,刚开始接触这个竞拍案例--“简单的公开竞拍”,我就抱着简单的心态去查看这个实例,但是自我感觉并不简单.应该是我实力不到家的原因吧!!!233333...不过经过大半天的努力,自己理解完之后,觉 ...

  6. 【每天一条Linux指令-Day1】kill掉多个mysql的进程

    我被问到过一个shell的问题,问的是如何kill掉多个mysql的进程? 怎么把这个的pid传递下去 ps -ef|grep mysql | xargs kill -9 ps -ef|grep my ...

  7. Elasticsearch 6 重要参数配置

    采用zip或tar.gz的二进制包方式安装的ES,需要配置一系列参数,其中重要参数配置如下: 一. ElasticSearch参数配置 1. data和logs路径配置 如果使用.zip或.tar.g ...

  8. QQ好友的价值玩法 及如何搞到几万好友？

    我们知道,现在的自媒体平台太多了.微信公众号,企鹅媒体平台,今日头条.搜狐.UC.一点等等等. 但是现在的话最主要的就是盈利,我们很多朋友玩自媒体这个在很多平台都有自己的账号和大量的粉丝.但是,最后大 ...

  9. HashMap底层实现原理及扩容机制

    HashMap的数据结构:数组+链表+红黑树:Java7中的HashMap只由数组+链表构成:Java8引入了红黑树,提高了HashMap的性能:借鉴一张图来说明,原文:https://www.jia ...

  10. R语言爬虫：CSS方法与XPath方法对比（代码实现）

    CSS选择器和XPath方法都是用来定位DOM树的标签,只不过两者的定位表示形式上存在一些差别: CSS 方法提取节点 library("rvest") single_table_ ...