jquery与 ajax 简单例子

jquery与 ajax 简单例子

基于JQuery框架的AJAX
PS:本人这篇始发于PHPCHINA，发现被很多人转了，但却未注明出处，想了一下，还是自己转到这里来。
前几天发了个贴，分享了prototype框架关于AJAX方面的学习过程。然后有人说jquery框架更方便。

正好项目中准备使用thickbox，于是干脆抛弃prototype.js，看起jquery.js了。JQuery确实不错，体积比Prototype小了许多，而且使用起来更方便更灵活。有人说Prototype像JAVA，正统；而JQuery像Ruby，灵活，更趋于OOP。

小试了下AJAX，感觉比prototype简洁多了，在JQuery中，AJAX有三种实现方式：$.ajax(),$.post,$.get()。

XHTML(主要):
代码: 复制内容到剪贴板
<div id="result" style="backgroundrange;border:1px solid red;width:300px;height:400px;"></div>

<form id="formtest" action="" method="post">

<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>

<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>

<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>

<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>

</form>

<button id="send_ajax">提交</button>

<button id="test_post">OST提交</button>

<button id="test_get">GET提交</button>
JS:
1、引入jquery框架：
代码: 复制内容到剪贴板
<script  type="text/javascript" src="../js/jquery.js"></script>
2、构建AJAX，JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了，可以直接封装在JS文件中：
代码: 复制内容到剪贴板
<script type="text/javascript">

//$.ajax()方式

$(document).ready(function (){

   $('#send_ajax').click(function (){ //直接把onclick事件写在了JS中，而不需要混在XHTML中了

          var params=$('input').serialize(); //序列化表单的值，与prototype中的form.serialize()相同

         $.ajax({

               url ：'ajax_test.php',  //后台处理程序

               type:'post',    //数据发送方式

             dataType:'json',  //接受数据格式

               data:params,  //要传递的数据

               success:update_page  //回传函数(这里是函数名)

               });

        });

});

function update_page (json) { //回传函数实体，参数为XMLhttpRequest.responseText

       var str="姓名:"+json.username+"";

       str+="年龄:"+json.age+"";

       str+="性别:"+json.sex+"";

       str+="工作:"+json.job;

       $("#result").html(str);

}

//$.post()方式：

$(function (){//$(document).ready(function (){ 的简写

      $('#test_post').click(function (){

                $.post('ajax_test.php',

               {username('#input1').val(),age('#input2').val(),sex('#input3').val(),job('#input4').val()},

                function (data){ //回传函数

                var myjson='';

               eval('myjson='+data+';');

               $('#result').html("姓名:"+myjson.username+"

工作:"+myjson['job']);

               });

       });

});

$.get()方式：

$(function (){

         $('#test_get').click(function (){

                     $.get('ajax_test.php',

                     {username("#input1").val(),age("#input2").val(),sex("#input3").val(),job("#input4").val()},

                     function  (data) {

                           var myjson='';

                           eval("myjson="+data+";");

                           $("#result").html(myjson.job);

                      });

           });

});

</script>
PHP代码：
代码: 复制内容到剪贴板
<?php

$arr=$_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆_REQUEST

$myjson=json_encode($arr);

echo $myjson;

?>

 +----------------------------------------------------------
         * @param mixed $where 数据
         * @param string $tables  数据表名
         * @param string $fields  字段名
         * @param string $order  排序
         * @param string $limit
         * @param string $group
         * @param string $having
         * @param boolean $cache 是否缓存
         * @param boolean $lazy 是否惰性加载
         * @param boolean $lock 是否加锁
         +----------------------------------------------------------
         * @return ArrayObject
         +----------------------------------------------------------
         * @throws ThinkExecption
         +----------------------------------------------------------
         */
        public function find($where,$tables,$fields='*',$order=null,$limit=null,$group=null,$having=null,$join=null,$cache=false,$lazy=false,$lock=false)
        {
                if(in_array($this->getDbType(),array('MSSQL','IBASE'),true) ) {
                        $this->queryStr = 'SELECT '.$this->parseLimit($limit)
                        .$this->parseFields($fields)
                        .' FROM '.$tables
                        .$this->parseJoin($join)
                        .$this->parseWhere($where)
                        .$this->parseGroup($group)
                        .$this->parseHaving($having)
                        .$this->parseOrder($order);
                }else{
                        $this->queryStr = 'SELECT '.$this->parseFields($fields)
                        .' FROM '.$tables
                        .$this->parseJoin($join)
                        .$this->parseWhere($where)
                        .$this->parseGroup($group)
                        .$this->parseHaving($having)
                        .$this->parseOrder($order);
                        if("ORACLE" == $this->getDbType())
                                if($limit[0] <= 0){
                                        if($limit[1] > 0)
                                                $this->queryStr = "SELECT * FROM (".$this->queryStr.") WHERE ROWNUM <= ".$limit[1];
                                }else{
                                        $whereClause = "";
                                        if($limit[1] > 0)
                                                $whereClause = " WHERE ROWNUM <= ".($limit[0] + $limit[1]);

                                        $this->queryStr = "SELECT * FROM ( SELECT ROW_.*, ROWNUM ROWNUM_ FROM ("
                                                                          .$this->queryStr.") ROW_"
                                                                          .$whereClause
                                                                          .") WHERE ROWNUM_ > "
                                                          .$limit[0];
                                }
                        else
                                $this->queryStr .= $this->parseLimit($limit);
                }
                return $this->query('',$cache,$lazy,$lock);
        }

<?php session_start(); ?>
<?php
{
$authcode = new AuthCode();
if ($authcode->GetUriFileName() == "authcode.php")
{
  $authcode->OutputImg();
}
}
function ChkAuthcode($Authcode)
{
if ($_SESSION['AuthCode'] == $Authcode)
{
  $rtn = true;
}
else
{
  $rtn = false;
}
$_SESSION['AuthCode'] = rand(0, 999999);
return $rtn;
}
class AuthCode
{
/* Public Variables */
/* Private Variables */
var $image;
#
var $sBgcolor;
var $nWidth;
var $nHeight;
var $nLen;
var $bNoise;
var $nNoise;
var $bBorder;
var $aFontlist;
/* Constractor */
function AuthCode()
{
  $this->sBgcolor = "#FFCC00";
  $this->nWidth = 70;
  $this->nHeight = 25;
  $this->nLeftMargin = 5;
  $this->nRightMargin = 5;
  $this->nTopMargin = 3;
  $this->nBottomMargin = 2;
  $this->nLen = 4;
  $this->bNoise = true;
  $this->nNoisePoint = 50;
  $this->nNoiseLine = 5;
  $this->bBorder = true;
 
  $this->aFontlist[0] = "./fonts/arial.ttf";
  $this->aFontlist[1] = "./fonts/comic.ttf";
  $this->aFontlist[2] = "./fonts/raavi.ttf";
  $this->aFontlist[3] = "./fonts/verdanai.ttf";
  $this->aFontlist[4] = "./fonts/tahoma.ttf";
  $this->aFontlist[5] = "./fonts/shruti.ttf";
  $this->aFontlist[6] = "./fonts/BKANT.TTF";
  $this->aFontlist[7] = "./fonts/comicbd.ttf";
  $this->aFontlist[8] = "./fonts/courbi.ttf";
  $this->aFontlist[9] = "./fonts/times.ttf";
}

function OutputImg()
{
  $this->image = "";
  $this->image = imagecreate($this->nWidth, $this->nHeight);
  $back = $this->getcolor($this->sBgcolor);
  imagefilledrectangle($this->image, 0, 0, $this->nWidth, $this->nHeight, $back);
  $size = ($this->nWidth - $this->nLeftMargin - $this->nRightMargin)/$this->nLen;
  if($size>($this->nHeight - $this->nTopMargin - $this->nBottomMargin))
   $size=$this->nHeight - $this->nTopMargin - $this->nBottomMargin;
 
  $left = ($this->nWidth-$this->nLen*($size+$size/10))/2 + $this->nLeftMargin;
  $code = "";
  for ($i=0; $i<$this->nLen; $i++)
  {
   $randtext = rand(0, 9);
   $code .= $randtext;
   $textColor = imagecolorallocate($this->image, rand(0, 100), rand(0, 100), rand(0, 100));
   $font = $this->aFontlist[rand(0,9)];//rand(1,4).".ttf";
   $randsize = rand($size-$size/10, $size+$size/10);
   $location = $left+($i*$size+$size/10);
   imagettftext($this->image, $randsize, rand(-18,18), $location, rand($size, $size+$size/5) + $this->nTopMargin, $textColor, $font, $randtext);
  }
  if($this->bNoise == true) $this->setnoise();
  $_SESSION['AuthCode'] = $code;
  $bordercolor = $this->getcolor("      ");
  if($border==true) imagerectangle($this->image, 0, 0, $this->nWidth-1, $this->nHeight-1, $bordercolor);
  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // date in the past
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
  header("Cache-Control: no-store, no-cache, must-revalidate"); // HTTP/1.1
  header("Cache-Control: post-check=0, pre-check=0", false);
  header("Cache-Control: private");
  header("Pragma: no-cache"); // HTTP/1.0
  header("Content-type: image/png");
  imagepng($this->image);
  imagedestroy($this->image);
 
  return $sAuthcode;
}
function ChkAuthcode($Authcode)
{
  if ($this->GetAuthcode() == $Authcode)
  {
   $rtn = true;
  }
  else
  {
   $rtn = false;
  }
  $_SESSION['AuthCode'] = rand(0, 999999);
  return $rtn;
}
function GetAuthcode()
{
  $x_AuthCode = $_SESSION['AuthCode'];
  $_SESSION['AuthCode'] = rand(0, 999999);
  return $x_AuthCode;
}
 
/* Private Functions */
function GetUriFileName()
{
  return substr($_SERVER['SCRIPT_NAME'], strrpos($_SERVER['SCRIPT_NAME'], '/') + 1 , strlen($_SERVER['SCRIPT_NAME']) - strrpos($_SERVER['SCRIPT_NAME'], '/'));
}
function setnoise()
{
  for ($i=0; $i<$this->nNoiseLine; $i++){
   $randColor = imagecolorallocate($this->image, rand(0, 255), rand(0, 255), rand(0, 255));
   imageline($this->image, rand(0, $this->nWidth), rand(0, $this->nHeight), rand(0, $this->nWidth), rand(0, $this->nHeight), $randColor);
  }
 
  for ($i=0; $i<$this->nNoisePoint; $i++){
   $randColor = imagecolorallocate($this->image, rand(0, 255), rand(0, 255), rand(0, 255)); 
   imagesetpixel($this->image, rand(0, $this->nWidth), rand(0, $this->nHeight), $randColor);
  }
}
function getcolor($color)
{
   $color = eregi_replace ("^#","",$color);
   $r = $color[0].$color[1];
   $r = hexdec ($r);
   $b = $color[2].$color[3];
   $b = hexdec ($b);
   $g = $color[4].$color[5];
   $g = hexdec ($g);
   $color = imagecolorallocate ($this->image, $r, $b, $g);
   return $color;
}
}
?>
function backup($bakfile = null, $tables = array())
 {
  if (empty($bakfile)) {
   $bakfile = $this->dbname . date("Ymdhis") . '.sql';
  } elseif (is_dir($bakfile)) {
   if (preg_match('//$/', $bakfile)) {
    $bakfile = $bakfile . $this->dbname . date("Ymdhis") . '.sql';
   } else {
    $bakfile = $bakfile . '/' . $this->dbname . date("Ymdhis") . '.sql';
   }
  }
  if (!$tables) {
   $this->query("SHOW TABLES");
   while ($row = mysql_fetch_row($this->queryID)) {
    $tables[] = $row[0];
   }
  } else {
   foreach ($tables as $k => $v) {
    $tables[$k] = $this->tablePrefix . $v;
   }
  }
 
  if ($fp = fopen($bakfile, 'wb')) {
   if ($this->dbcharset) {
    fwrite($fp, "SET NAMES " . $this->dbcharset . ";nn");
   }
   foreach ($tables as $table) {
    $this->dumpTable($table, $fp);
    fwrite($fp, "n");
   }//foreach
   fclose($fp);
   return true;
  } else {
   return false;
  }//if
 }
 
 //私有方法 导出表格
 function dumpTable($fullTableName, $fp)
 {
  //备份表结构 
  fwrite($fp, "-- n-- {$fullTableName}n-- n");
  $row = $this->findBySql("SHOW CREATE TABLE `{$fullTableName}`");
  fwrite($fp, $row['Create Table'] . ";nn" );
  //备份表库数据
  $this->query("SELECT * FROM `{$fullTableName}`");
  while ($row = mysql_fetch_assoc($this->queryID)) {
   foreach ($row as $k=>$v) {
    $row[$k] = "'" . $this->qstr($v) . "'" ;
   }
   $sql = "INSERT INTO `$fullTableName` VALUES (" . join(",", $row) . ");n";
   fwrite($fp, $sql);
  }
  mysql_free_result($this->queryID);
  fwrite($fp, "n");
 }
 
 //恢复数据库文件
 function restore($bakfile)
 {
  if ($fp = fopen($bakfile, 'r')) {
   $sql = '';
   while (!feof($fp)) {
    $line = fgets($fp);
    if (strpos($line,'--')!==0)
    {
     $sql .= $line;
     //pp($sql);
    }
    if (preg_match('/;s*$/', $sql)) {
     $this->query($sql);
     $sql = '';
    }
   }
   fclose($fp);
   return true;
  } else {
   return false;
  }
 }
<?php
if (isset($_GET['action']) && $_GET['action']=='update')
{
    //update notice data
    //上传文件
    require_once("upload_class.php");
    $f = new Upload( $savepath, $fileFormat, $maxsize, $overwrite);
    if (!$f->run('img'))
    {//下面的img是Form中上传文件的input的名字
        echo $f->errmsg();  //这里只能传递最后一个出错的信息，详细的信息在$f->getInfo()中可以得到。
        print_r($f->returnArray);
    }
    echo "
    <script src="".__FILENAME__."/js/jquery.js" type="text/javascript"></script>
    <script>
    var ptext='';
    ptext="OK";
    //alert($('#img_view').html());
    parent.$('#img_view').html(ptext);
</script>";
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="{{$tempurl}}/admin.css" rel="stylesheet" type="text/css" />
<link href="{{$baseurl}}/js/calendar/default/datePicker.css" rel="stylesheet" type="text/css" />
<script src="{{$baseurl}}/js/calendar/WdatePicker.js" type="text/javascript"></script>
<script src="{{$baseurl}}/js/jquery.js" type="text/javascript"></script>
<script src="{{$baseurl}}/js/Forms.js" type="text/javascript"></script>
<script src="{{$baseurl}}/js/FormValid.js" type="text/javascript"></script>
<script type="text/javascript">
      FormValid.succeed = function () {
      $.post("./article.php?action=update",$.getForms("update"),function (msg){
      alert(msg);
      if(msg=="更新公告成功")
      {
        location.href("./article.php");
      }
      //location.href("{{$baseurl}}/index.php");
  });
    return false; 
    }
function file_addupload(type)
{
  //负责增加图片输入框
  var ptext='';
  ptext=$("#"+type+"_more").html()+"<br /><input type='file' name='"+type+"[]' class='input' />";
  $("#"+type+"_more").html(ptext);
}
</script>
<title>发布文章--编辑页面</title>
</head>
<body >
<table width="99%" border="0" cellpadding="0" cellspacing="1" class="install">
  <tr>
    <td colspan="2" class="title">编辑文章内容</td>
  </tr>
  {{section name=article loop=$article}}
  <form action="./article.php?action=update" method="post" name="update" enctype="multipart/form-data" target="upload_iframe">
  <input type="hidden" name="article_id" value="{{$id}}">
  <tr>
    <td class="left">文章标题:</td>
    <td class="right"><input type="text" id="title" name="article_title" value="{{$article[article].title}}" class="input" size="35" valid="required" errmsg="文章标题不能为空" /></td>
  </tr>
  <tr>
    <td class="left">发布IP:</td>
    <td class="right"><input type="text" id="ip" value="{{$article[article].ip}}" name="ip" class="input" readonly /></td>
  </tr>
  <tr>
    <td class="left">作者:</td>
    <td class="right"><input type="text" id="author" name="article_validtime" value="{{$article[article].author}}"  valid="required" errmsg="请输入文章作者"  /></td>
  </tr>
  <tr>
    <td class="left">分类:</td>
    <td class="right"><select name='sort'>
{{html_options options=$sort_options selected=$article[article].sort }}
</select></td>
  </tr>
  <tr>
    <td class="left">来源:</td>
    <td class="right"><input type="text" id="comes" name="comes" value="{{$article[article].comes}}" class="input"/></td>
  </tr>
  <tr>
    <td class="left">是否置顶:</td>
    <td class="right">{{html_radios name='is_top' options=$is_top_radios checked=$article[article].is_top separator=' ' _note='是否置顶&#124;radio&#124;1=>是,0=>否' }}</td>
  </tr>
  <tr>
    <td class="left">内容:</td>
    <td class="right">{{$editor}}</td>
  </tr>
    <tr>
    <td class="left">图片上传:</td>
    <td class="right">
    <span id="img_view">
    <input type="file" name="img[]" class="input" />
      <a href="#" onclick="file_addupload('img')">++</a>
    <span id="img_more"></span>
    </span>
  </tr>
  <tr>
    <td class="left">文件上传:</td>
    <td class="right"><input type="file" name="file[]" class="input" />
      <a href="#" onclick="file_addupload('file')">++</a>
    <span id="file_more"></span>
</td>
  </tr>
  <tr>
    <td colspan="2" class="page" style="text-align:center;"><input type="submit" name="submit" class="button" value="保存" />    <input type="button" name="article_return" value="返回"  class="button" onclick="javascript:location.href('./article.php');" /></td>
  </tr>
  </form>
  {{/section}}
</table>
<iframe name="upload_iframe" style="width: 400px; height: 100px; display: none;">
</iframe>
</body>
</html>