<!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. Swift_ScrollView _ API详解

    Swift_ScrollView _ API详解 GitHub class ViewController: UIViewController,UIScrollViewDelegate { var sc ...

  2. c#随便聊聊数据库操作

    最近在学习web后台以及Python,到了程序员的转折年纪了,哎.估计很久不会写博文了.言归正传. 在原理的数据库连接池HiKari项目上.我扩展了独立的3个库,说是3个库,其实原本该是一个库.先聊聊 ...

  3. javascript 正则表达式之分组与前瞻匹配详解

    本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清.所以在这里总结一下,如有不对,还望大神指点. 1.分组匹配: 1.1捕获性分 ...

  4. redis的主从配置

    redis的主备配置比较简单,只需要在配置上新增slaveof属性即可,如果主节点需要密码验证,则在加上masterauth属性. 测试安装一个备用redis,备份前一章的节点redis的docker ...

  5. day 23 模块2

    1.namedtuple     命名元组  -> 类似创建一个类 from collections import namedtuple   # 类 p = namedtuple("P ...

  6. Python-变量与基础数据类型

    ·变量(variable)  笔记: 变量本质上是一个占位符.变量可以用来存储整数.字符串.列表等.简单的可以理解为一个座位,可以坐老人也可以坐小孩,可以坐男孩,也可以坐女孩. 在python里,标识 ...

  7. 『Python基础-5』数字,运算,转换

    『Python基础-5』数字,运算,转换 目录 基本的数字类型 二进制,八进制,十六进制 数字类型间的转换 数字运算 1. 数字类型 Python 数字数据类型用于存储数学上的值,比如整数.浮点数.复 ...

  8. phpcms v9 完美更换整合Ueditor 1.3

    phpcms这套系统相信大家不陌生,它做的很不错,但是也有好多地方不满足我们的需求,比如在线编辑器. 它自带的是CKEditor编辑器,功能较少,比如代码加亮功能就没有. 所以我来说一下怎么替换php ...

  9. ruby中的respond to ?用法

    今天写脚本,遇到了这个函数,遂搜索及阅读相关代码,整理如下: respond_to 是判断是否是某个类型的方法,比如: ar = "ss" p ar.respond_to?(:to ...

  10. Django中的模型继承

    1.使用最原始的方式继承 class Animal(models.Model): name = models.CharField(max_length=20) age = models.Integer ...