mashuaima

mashuaima 当前离线

象骑士-大象, 积分 222, 距离下一级还需 278 积分

该用户从未签到

发表于 2011-1-15 16:55:13

本帖最后由 mashuaima 于 2011-1-15 16:56 编辑

此教程是由php666提供的文字教程，旨在让学习php的朋友能更加灵活的运用当前的技术，也给不了解此技术的朋友起个入门的作用。

在开发项目时应用开发框架开发可以大大提高项目开发的速度，但是对于刚接触框架的朋友有些地方可能用起来比较困难，下面就结合thinkphp的国产开发框架以及当前流行的Jquery框架技术讲解一下无刷新的查询案例：

案例很简单，一个查询框，点击查询按钮后在下面就会无刷新的加载出符合条件的数据来，首先查询框的源码如下：

<form
id="form1" action="#"
method="post">

<input name="form_date" type="text"
onClick="SelectDate(this,'yyyy-MM-dd',200,0)" readonly="readonly"
style="cursor:pointer" id="form_date"/>  

<input type="submit" value="查询">

</form>

此查询框是应用了js的一个日期控件（关于日期控件的讲解请查看），就是查询相应的日期查询出当天的请假情况，如果有请假的记录就返回一个数组，如果没有就返回无相关记录。

点击查询后就触发了书写的js函数，这个函数应用了Jquery的编码方式。当然在页面开头要引用相应的页，源码如下：

<script type="text/javascript" language="JavaScript" src="../Public/Js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="JavaScript" src="../Public/Js/search_ajax.js"></script>

一个是引用Jquery源文件，一个是js的页。

在search_ajax.js 中源码如下：

$(document).ready(function(){

$("#form1").submit(function(){

var loading='加载中.....'; // 等待显示

var params=$("#form1").serialize(); // 格式化提交数据

$.ajax({

type:"POST", // 提交方式

url:"../leave/Return_Ajax", // 提交地址，thinkph地址写法

dataType:"json", // 数据传输方式

data:params,

beforeSend:function(){$("#resText").html(loading)},
// ajax 数据没返回之前的动作

success:callback // 成功后

});

return false;

});

});

function callback(json){
// Jquery 中的each函数

var str="";

$.each(json, function(commentIndex, comment) {

str +='<div class="para">'+comment['name']+'说：   '+comment['content']+'</div>';

}); //
注意+= 和单引号
class双引号

$("#resText").html(str); //
放在括号外面是html
不是append

}

Thinkphp中Return_Ajax方法

$model=D("leave"); // 实例化模型

$model->query('set charset utf-8');

$data=array();

$condition=$_POST['form_date'];

$data['date']=$condition;

$re=$model->where($data)->select(); // 根据条件选出

if(isset($re))
// 如果有数据

{

$myjson = json_encode($re);

sleep(3);

print_r($myjson); // 必须放在外面

}else{

$str="未找到相关记录";

$myjson = json_encode($str);

sleep(3);

print_r($myjson); // 必须放在外面

}

到此就ok ，读者可以自己按照自己的设计发挥，做一个无刷新的查询。。

jquery