使用jQuery+jSon+delicious创建'相关文章'

我的日志引擎使用的是Google的Blooger，然后FTP到61dh.com的所属服务器。所有页面都是HTML，没有使用数据库。因此和Wordpress相比之下，功能要少了很多。但是每次发布新文章，我都会把文章的加到delicious(美味书签)。这么一来，借助delicous提供的扩展接口，我给日志添加了一些功能。我在日志里曾经介绍过，如何使用美味书签创建日志分类。昨天我又给日志添加了'相关文章'的功能，这次使用到的是delicious提供的JSON Feeds。

通过http://feeds.delicious.com/v2/json/61dh，可以得到61dh.com的最新15个日志的Feeds ，Delicious提供的JSON Feed不仅仅是罗列保存的书签链接，而且还可以输出具有相同标签的链接。因此只要根据一篇日志的标签信息，就可以找出具有相同标签的帖子信息了。例如：通过http://feeds.delicious.com/v2/json/61dh/css+html 可以找出标签是css和html的文章链接。 Feeds输出是JSON格式，大致如下：

[
{"u":"http:\/\/www.61dh.com\/blog\/2009\/03\/jquery-ajax-xml.html",
 "d":"jQuery ajax - \u5982\u4f55\u4f7f\u7528XML",
 "t":["jQuery","PHP","ajax"],
 "dt":"2009-03-09T03:14:29Z",
 "n":"",
 "a":"61dh"
},
{...}, //第二篇文章
... //第三、第四...
]

上面，我只列出一个完整文章的JSON对象格式，很显然不同的JSON Feed有着不同的Object Attributes。在Delicious提供的JSON feed里，每个Object包含有6个属性：

• 1. u - 链接URL，在这里代表每一篇日志的永久地址
• 2. d - 链接名称，在这里代表日志的标题
• 3. t - 链接标签，在这里代表日志的标签
• 3. dt - 链接代表加入时间
• 4. n - 链接注释，在这里是空白
• 5. a - 书签的所有者， 这里是61dh

知道了JSON的输出格式后，就可以使用jQuery的getJSON()方法来处理输出结果。这里我们感兴趣的是相关文章的地址和标题，也就是u和d。jQuery代码如下：

$.getJSON("http://feeds.delicious.com/v2/json/61dh/CSS+HTML+Jquery?callback=?",
  function(data){//data这里是JSON对象，它可以是由多个JSON对象组成
    $.each(data, function(i,item){//每一个对象包含有一个日志的信息
      //item.u 就是日志的地址；item.d就是日志的标题
      $('<a href='+item.u+'>'+item.d+'</a><br />').appendTo("#related-post");
        if ( i == 8 ) return false; //默认下，JSON feed 提供15个链接，这里我只取8个
      });
  });

注意：.getJSON的第一个变量是可以提供JSON格式输出的URL，URL的参数要根据实际情况而定，delicious提供的JSON，使用callback作为参数名：callback=?, jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

上面的代码可以把标签为CSS、HTML和jQuery的文章链接找出，但是就这么写还不行，相对一篇文章，我们要自动找出该文章的所属的标签，然后动态的加入到JSON URL上。另外还有考虑找不到结果(标签有误) 和只有一个结果(找到文章本身)的情况。所以完整的代码如下：

 <script type="text/javascript">    
  //改函数用于判断JSON object所包含的子object个数
  function getOnum(object) {
    var num = 0;
    for(var i in object) { num ++; }
    return num;
  }
  $(document).ready(function(){
    var cat ="";
    $(".blogger-labels a[rel='tag']").each(function(){ //找出标签的名称
      cat += $(this).text() + '+'; //标签用+分隔
    });
    cat = cat.slice(0,-1); //去掉最后一个‘+’号
    
  $.getJSON("http://feeds.delicious.com/v2/json/61dh/"+cat+"?callback=?",
  function(data){
    var Onum = getOnum (data); 
    if ((Onum == 0) || (Onum == 1)) //结果为0或者1
      $('<p>找不到相关文章</p>').appendTo("#related-post");
    else{ //结果 > 1
      $('<ul>').appendTo("#related-post");
      $.each(data, function(i,item){
      $('<li><a href='+item.u+'>'+item.d+'</a></li>').appendTo("#related-post");
      if ( i == 8 ) return false;
      });
      $('</ul>').appendTo("#related-post");
    }
  });
});
</script>
<div id="related-post">
  <h4>相关文章: </h4>
</div> 

除了getJSON，上面的代码里还有一些小知识点：

• 1. 如何判断Object是否为空： getOnum()函数
• 2. jQuery selector - 选择所有class name 为blogger-labels区内的rel属性为tag的<a>： $(".blogger-labels a[rel='tag']") -
• 3. 去除字符串的最后一个字符：cat = cat.slice(0,-1);
• 4. 往一个HTML元素里添加加HTML代码：appendTo("#related-post")

...阅读全文

jQuery ajax - 如何使用XML

我在日志里介绍了很多使用jQuey load的方法来实现ajax。load()应该是jQuery里ajax的最简单的运用了，你不用了解ajax是怎么一回事，就可以把某个脚本的输出(通常是text/html类型)动态的赋给页面的某个元素(例如div和p)。但是在实际的运用中，你可能会发现load()常常不能满足要求，例如：你想对一个表单的多个控件使用ajax进行更新，可是load()一次只可以对其中一个控件起作用；如果使用多个load()，那么会增加服务器的负荷，因此肯定不是一个好办法。本文要介绍jQuery的ajax()方法，它是类似传统的ajax方法。jQuery的ajax()方法涉及的知识点很多，具体可以参考jQuery中文参考文档。这里要介绍的是如何使用XML数据类型以及如何对XML进行读取。

1.使用PHP输出XML，如果你只是使用echo，那么要注意要先输出正确的header: Content-Type是text/xml。如果你要给XML的某个节点用HTML代码赋值，你必须把HTML放在<![CDATA[" 和"]]>之间。例子如下: genXML.php

<?php
echo "header("Content-Type: text/xml; charset=UTF-8");";
echo <<< XML
<?xml version="1.0" encoding="UTF-8"?>
<rsp>
  <name>Adam</name>
  <site>http://www.61dh.com</site>
  <note>
    <![CDATA[ 
      HTML代码可以放在这里
    ]]>
  </note>
</rsp>
XML;
?>

2. HTML样本：

<div id="name"></div>
<div id="note"></div>

3.接下来我们要使用jQuery的ajax()方法，读取genXML.php的输出(xml)，然后把相关节点的内容赋给HTML元素：#name和#node。代码如下：

$.ajax({ 
  url: "genXML.php", //本例中，url为genXML.php
  type: 'GET', //根据实际情况，可以是'POST'或者'GET'
  //data: "name=adam&location=61dh",本例中没有用到data
  dataType: 'xml', //指定数据类型
  timeout: 1000, //设置超时1000 = 1秒
  error: function(){ 
    alert('Error loading XML document'); }, //错误提示
  success: function(xml){ //ajax请求成功后 do something with xml
    //把XML的相关节点值赋给HTML里相关ID
    $('#name').html($(xml).find('name').text()); 
    $('#note').html($(xml).find('note').text());
  }
});

我在上面的代码里已经做了比较详细地注释，值得再提的是使用jQuery提供find()的方法可以很简单的读取XML某个节点的值，例如：$(xml).find('name').text(); //读取节点name；然后使用html()的方法赋值给HTML里的某个元素。

注: 我在日志里写了很多有关jQuery的文章而且还挺受欢迎:-)，所以我把它专门作为一个菜单放在上方导航条里。希望这些文章对jQuery初学者有所帮助。如果你有任何的问题和建议，请给我留言或者发Email。谢谢！

...阅读全文

ajax vs iframe

前两天在百度知道看到一个有关表单验证的问题，提问的网友想知道：

...录入完张三的信息后，再录入张三的名字时会提示已经录入过该人的信息了，弹出信息框的形式提示...

这里的验证需要通过数据库的查询来验证，因此需要另一个PHP文件来执行。并且执行的结果要以弹出信息框的方式出现，因此要用到Javscript。通常的解法应该是使用ajax，具体思路如下：(我采用jQuery提供的ajax方法，这样代码会比较简单)

1. 需要验证的文本框 - HTML代码：

<input name="xm" type="text" id="xm" size="30" />

2. 使用jQuery的ajax方法调用check.php文件并且把结果:

$("#xm").onChange(function(){
  var name = $(this).val();
  $.ajax({
   type: "GET",
   url: "check.php",
   data: "name="+name,   
   success: function(repeat){
     if(repeat)
     alert( "重复!" );
   }
  });
});

3. check.php - 检测输入的名字是否已经存在于数据库，如果是返回1，如果不是返回0

<?php
  $xm=$_REQUEST['xm'];
  $sql="select count(*) from jinengchaxun where xm='$xm'";
  mysql_connect(..自己一定写正确哦..);
  $res=mysql_query($sql);
  list($cnt)=mysql_fetch_row($res);
  mysql_free_result($res);
  mysql_close();
  return ($cnt>0) ? 1 : 0; 
?>

注意：我没有测试过这种方法，有兴趣的可以试一下。

另外一种方法用到iframe，是另外一个网友提供的：

/**一、编写一个checkxinxi.php来检测指定的名字是否存在，内容如下：*/
<?php
$xm=$_REQUEST['xm'];
$sql="select count(*) from jinengchaxun where xm='$xm'";
mysql_connect(..自己一定写正确哦..);
$res=mysql_query($sql);
list($cnt)=mysql_fetch_row($res);
mysql_free_result($res);
mysql_close();
echo <<<END
<script type=text/javascript>
if ($cnt>0) {
alert('重复提示：已经录入过 $xm 了！');
parent.document.getElementById('chk_rst').innerHTML='重复';
}else parent.document.getElementById('chk_rst').innerHTML='新人';
</script>
END;
?>
/**二、addxinxi.php进行如下修改既可：*/
<input name="xm" type="text" id="xm" size="30" />
//修改为：
<input name="xm" type="text" id="xm" size="30" 
  onchange="chk_frm.location.href='chkxinxi.php?xm='+this.value;" />
<span id=chk_rst></span>
<iframe name=chk_frm style='display:none'></iframe>

我把原答案里的parent.chk_rst.innerHTML 改成 parent.document.getElementById('chk_rst').innerHTML，因为Firefox不识别parent.chk_rst。

个人感觉，使用iFrame比较简单, 但是iFrame其实是把一个页面隐藏在另外一个页面里，所以执行的时候它需要刷新整个页面。而ajax可以异步更新，所以相对要平滑许多，而且使用jQuery后ajax的书写也变得简单了，所以还是建议使用ajax。

方法二的演示

...阅读全文

jQuery 显示PHP源代码

我在上篇文章里介绍了如何运用jQuery来显示页面源代码，该方法简洁易用，但是有个缺点：不能显示动态源代码。例如，你用它来显示PHP代码，得到的实际上是PHP被执行后产生的HTML代码。本文将介绍如何显示PHP代码本身。其实要显示PHP代码并不难，PHP库就自带有下面两种方法，它们不但可以显示PHP代码，而且还具有语法加亮的功能。

• highlight_file (string $filename [, bool $return]) //输入为文件
• highlight_string (string $str [, bool $return]) //输入为字符串

默认情况下，以上两种方法直接打印输出，也就是说你不用加echo。如果你想要让它们输出结果做为返回值，你可以加入第二个参数，例如：$result = highlight_file ($file, true);

本文要介绍的方法用到highlight_string，步骤如下：

1.创建一个PHP文件，这里命名为hlight.php

<?php
$file = isset($_POST['file'])? $_POST['file'] : "";
$content = file_get_contents($file);
highlight_string($content);
?>

2. 对上篇文章里的Javascript稍作修改，如下：

<script type="text/javascript">
  $( document ) . ready ( 
   function() {
    $('a.sourcecode').each (
      function( i ) {
        $( this ).after( '<pre class="sourcecode"></pre>' );
      }
    )
    $( 'pre.sourcecode' ).hide();
    $('a.sourcecode').toggle ( 
      function() {
      if( !this.old ){
      this.old = $(this).html();
      }
      $(this).html('隐藏代码');
        showCode(this);
      },
      function() {
        $(this).html(this.old);
        $(this.nextSibling).hide();
      }
    )
    function showCode(o){
      if(!o.nextSibling.hascode){
       var rel = o.href.split("/");
       $(o.nextSibling).load("hlight.php",{"file":rel[rel.length-1]});  
          o.nextSibling.hascode=true;
      }
      $(o.nextSibling).show();
    }
  }
)
</script>

3. 链接代码:

<a href="simple-test-system.php" class="sourcecode">
显示源代码(直接显示php代码)</a>
<!--href里php文件必须是和页面在同一个路径下-->

实际上，这种方法也适用于显示HTML，Javascript，CSS等代码。当然如果你不想显示PHP代码，则必须使用上篇文章中介绍的方法。

演示：显示php代码

...阅读全文

jQuery 显示页面源代码

如果你的网站是有关编程教程的，那么你一定常常要在页面显示源代码，特别是在那些演示页面。虽然用户可以通过右键点击查看页面源代码（大部分浏览器都有这个功能），但是这不如直接在页面上点击一个链接，然后在同一个页面上显示代码来的简单方便。下面就要介绍如何使用jQuery来实现这个功能。

首先我们要个显示代码的链接，并且给这个链接加上一个class，这样就可以让显示代码功能只有在这一类的链接上有效。

1. 链接代码：

<a href="showSource.js" class="seeCode">查看代码</a>
<!--注意:
这里的href是指你要查看的源代码的文件名。
如果是当前页，你可以用href=“#” 更正（2009/1/20)：用‘#’的方法在IE下行不通。
-->

2. Javascript代码：

<script type="text/javascript">
  $( document ) . ready ( 
  function() {
    $('a.seeCode').each (
      function( i ) {
        $( this ).after( '<pre class="seeCode"></pre></div>' );
      }
    )
    $( 'pre.seeCode' ).hide();
    $('a.seeCode').toggle ( 
      function() {
    if( !this.old ){
      this.old = $(this).html();
    }
        $(this).html('隐藏代码');
        parseCode(this);
      },
      function() {
        $(this).html(this.old);
        $(this.nextSibling).hide();
      }
    )
    function parseCode(o){
      if(!o.nextSibling.hascode){
          $.get (o.href, //注意：这里用到ajax - .get()
            function(code){
              code=code.replace(/&/mg,'&#38;');
              code=code.replace(/</mg,'&#60;');
              code=code.replace(/>/mg,'&#62;');
              code=code.replace(/\"/mg,'&#34;');
              code=code.replace(/\t/g,'  ');
              code=code.replace(/\r?\n/g,'<br>');
              code=code.replace(/<br><br>/g,'<br>');
              code=code.replace(/ /g,'&nbsp;');
              o.nextSibling.innerHTML=code;
              o.nextSibling.hascode=true;
            }
          );
      }
      $(o.nextSibling).show();
    }
  }
)
</script>

注意：上述代码用到ajax 的.get()方法,通过给定的代码href，得到代码运行的结果。这种方法可以直接显示css、javascript、html等静态的代码。但是不能显示的动态代码，例如：php文件，用这种方法得到的实际上是php运行的结果。我会在以后的文章里介绍如何显示php文件。

另外，从上述代码里我们还可以看到，代码会被显示在“seeCode”class的链接下，并且被放在<pre>标签里，所以我们有必要给<pre>加上css样式，这样显示的代码就比较容易和页面的其他内容区分开来。

3. CSS代码：

pre {
  padding: 5px;
  color: #000;
  background-color: #DDD;
  border: 1px solid #CCC;
  line-height: 1.1em;
  overflow: auto;
}

演示：1. 显示HTML  2.显示php代码运行结果

...阅读全文

jQuery load的详解

我在日志里介绍过，jQuery Load的简单运用和如何防止Load使用缓存。这篇文章将对jQuery Load做更加详细的介绍。

调用load方法的完整格式是：load( url, [data], [callback] ),其中

• url：是指要导入文件的地址。
• data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
• callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。

一：如何使用data

1.加载一个php文件，该php文件不含传递参数

$("#myID").load("test.php");
//在id为#myID的元素里导入test.php运行后的结果

2. 加载一个php文件，该php文件含有一个传递参数

$("#myID").load("test.php",{"name" : "Adam"});
//导入的php文件含有一个传递参数，类似于：test.php?name=Adam

3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});
//导入的php文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com

4. 加载一个php文件，该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//导入的php文件含有一个数组传递参数。

注意：使用load，这些参数是以POST的方式传递的，因此在test.php里，不能用GET来获取参数。

二：如何使用callback

比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：

$("#go").click(function(){
  $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){
    $("#myID").fadeIn('slow');}
  );
});

演示和下载：jQuery-Load

...阅读全文

防止jQuery Load使用缓存的方法

缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中，我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。

jQuery Load样本代码：

$(document).ready(function(){
  $("#labels").load("/blog/categories/labels.html"); 
  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。
});

当我更新了labels.html以后，在IE7里load方法仍旧在使用旧的labels.html，就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法，把下面的语句加在head的javascript文件里，就可以解决问题。

$.ajaxSetup ({
    cache: false //关闭AJAX相应的缓存
});

此外我再介绍几种方法解决缓存的方法。注意：我没有在jQuery load的问题上测试过，这些方法仅供参考！

1.更改文件名，比如把labels.html改成lables_new.html，但是这是没有办法的办法，一般没有人这么做。

2.在labels.html后加上特定时间，比如lables.html?20081116。在实际工作中，在我更新css/javascript文件后，我都是用这种办法来防止文件被缓存。

3.在labels.html文件的顶部加入以下声明：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

4.load函数不仅可以调用HTML，也可以调用script，比如labels.php，可以在php文件里使用header函数：

<?php
header("Cache-Control: no-cache, must-revalidate");
?>

11/20更新 -- 想要对load有更多了解，请读这篇文章 jQuery load的详解

...阅读全文

jQuery Load的简介

jQuery提供的ajax接口，其中的一种方法load，可以非常方便的调用服务器端的HTML，然后插入某个DOM元素里。我的博客使用Blogger日志引擎，每次更新页面一个元素的内容，就要修改模板，然后重新发布修改每一个相关的帖子，非常的没有效率。例如本博客边侧栏的“日志分类”和“收藏我的日志”栏目，其中的内容经常要更新。我就是用jQuery提供的load的方法，把这些栏目的内容存放在独自的HTML文件里，然后在页面装载的时候自动导入。具体方法如下：

1.日志分类HTML，labels.html（样本）

<h2 class="sidebar-title">日志分类</h2>
<ul>
  <li><a href="/blog/categories/css.html" >CSS</a>&nbsp;(11)</li>
  <li><a href="/blog/categories/html.html">HTML</a>&nbsp;(6)</li>
</ul>

2.模板边侧栏HTML（样本）

<div id="sidebar"> <!--日志边侧栏-->
  <div id="labels"></div> <!--日志分类栏目-->
</div>

3.jQuery代码

$(document).ready(function(){
  $("#labels").load("/blog/categories/labels.html"); 
  //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。
});

这样一来，当我要对日志分类栏目的内容更新时，就不用去更改日志模板、重新发布更改每一个相关帖子了。我只要更新labels.html代码就可以了。

11/20更新 -- 想要对load有更多了解，请读另外两篇文章：

1. 防止jQuery Load使用缓存的方法
2. jQuery load的详解

...阅读全文