<!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. 《Linux 学习》01---redis安装, 并使用Redis Desktop Manager 连接

    一.环境简介: linux 系统:centos 7.X 二.安装大纲: 1.下载安装包 2.安装 3.统一管理redis 配置文件 4.编辑redis配置文件,设置常用的功能 5.(1)命令启动,连接 ...

  2. 【Django笔记三】Django2.0配置mysql模型

    一.环境版本信息: 操作系统:windows10 Django版本:2.0.5 Python版本:3.6.4 Mysql版本: 5.5.53   安装mysql 二.安装Mysqlclient: 1. ...

  3. anyconnect connection attempt has failed

    anyconnect connection attempt has failed 在控制面板-网络与Internet-网络连接,右键AnyConnect secure连接适配器,点击属性 在连接项目中 ...

  4. C++ map练习

    C++ STL之map map介绍 C++里的map数据结构,会存储键值对信息key-value,通过key得到value的信息.map的key与value有一个特点就是:每个唯一的key拥有唯一对应 ...

  5. SpringBoot整合Mybatis,TypeAliases配置失败的问题

    SpringBoot整合Mybatis,TypeAliases配置失败的问题 问题描述 在应用MyBatis时,使用对象关系映射,将对象和Aliase映射起来. 在Mybatis的文档明确写出,如果你 ...

  6. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  7. js滚动监听

    下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 ? 1 2 3 4 5 6 7 8 window.onscroll = function () {  var t = docum ...

  8. Java Web项目里 classpath 具体指哪个路径

    classpath路径指什么 只知道把配置文件如:mybatis.xml.spring-web.xml.applicationContext.xml等放到src目录(就是存放代码.java文件的目录) ...

  9. flask（列表数据接口设计）

    新闻列表数据只是当前页面的一部分 点击分类时需要去获取当前分类下的新闻数据 并在展示的时候需要更新新闻列表界面,不需要整体页面刷新 所以新闻数据也使用 ajax 的方式去请求后台接口进行获取 接口设计 ...

  10. （杭电 1702）ACboy needs your help again!

    ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...