<!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. Xcode 9.3 pod install update 错误

    [!] Oh no, an error occurred. Search for existing GitHub issues similar to yours: https://github.com ...

  2. Vue中把从后端取出的时间进行截取

    未截取前 截取后 方法: </div>{{times}}</div> export default{ data() { return { // getTime储存从服务器请求回 ...

  3. git 对文件大小写修改无反应 不敏感解决办法

    git config core.ignorecase false 执行之后就能自动检测到了 2019-01-18

  4. (Linux学习笔记一:压缩)[20180209]

    学习笔记一:压缩 2015年2月5日 上午 10:23 压缩命令 压缩文件的扩展名大多是*.tar.*.tar.gz.*.tgz.*.gz.*.Z.*.bz2 常见的压缩命令gzip与bzip2,其中 ...

  5. wait();notify();简单例子

    public class Test1{ /** * @param args */ public static void main(String[] args) { new Thread(new Thr ...

  6. Python入门 —— 05时间日期处理小结

    此文多涉及基础,如果想要深入理解则到文末,有提供链接 涉及对象 1. datetime 2. timestamp 3. time tuple 4. string 5. date - datetime基 ...

  7. asp.net在一般处理程序里面操作Session

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState ...

  8. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  9. 一、Django初级

    创建项目,也就是网站 1.cmd,输入:pip3 install Django==2.1.2 2.>>>import django 3.cmd进入需要建项目的文件夹,django-a ...

  10. PAT 1001 害死人不偿命的(3n+1)猜想

    1001 害死人不偿命的(3n+1)猜想 (15 分) 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复 ...