jquery实现ajax

来源：互联网发布：看帧数的软件编辑：程序博客网时间：2024/05/21 10:23

jquery实现ajax，这么看起来还是蛮简单的。代码量极少。重点是搞清楚几个概念。

Code:

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<div class="query">
<form action="stastics/index.php?action=ajax" method="post" id="days-query-form">
请选择查询天数：
<select name="period" >
<option value="30" {if $period==30} selected="selected"{/if} >30天</option>
<option value="15" {if $period==15} selected="selected"{/if}>15天</option>
<option value="7" {if $period==7} selected="selected"{/if}>7天</option>
</select>
<input type="submit" name="dosubmit" value="确认" />
</form>
</div>
<div class="img_box" id="img-box">
<img src="./images/15daystend.png" alt="15days record count" />
</div>

Code:

function success(response, status) {
if(status == 'success') {
$('#img-box').html('<img src="'+response.src+'" />');
timeoutID = setTimeout(refresh, 3000);
}
}
function validate(jqForm, options) {
$('#img-box').html('<img src="./images/loading.gif" />');
clearTimeout(timeoutID);
}
function refresh() {
timeoutID = setTimeout(refresh, 3000);
}
$(document).ready(function() {
var options = {
dataType: 'json',
beforeSubmit: validate,
success: success
};
$('#days-query-form').ajaxForm(options);
timeoutID = setTimeout(refresh, 100);
});

refresh我没搞懂是怎么回事。从最后开始，$(document).ready(function() { }这一句是当文档加载完毕以后执行的函数。options里面datatype是回传参数的格式，json是类似于XML的一种形式，但是用于Javascript，自己可以百度一下。beforeSubmit是指在提交表单前执行的函数，success是成功返回值以后所执行的函数，正因为要返回值，所以在提交数据的页面，即index.php?action=ajax末尾加上print $out;，其中$out是返回的参数，我的例子里为生成图像的地址。而$('#days-query-form').ajaxForm(options);就是按options设置提交页面，默认的提交方式应该是get。不过应该影响不大，因为我用的PHPCMS改的，参数又不是很大很多，反正暂时这样看来是没什么影响。

$('#img-box').html('<img src="'+response.src+'" />');前面那$('#img-box')是选择器，这是jquery能适应CSS1~3，所以选择器的规则跟CSS都一样。这个对熟悉CSS的人来说很方便。.html(str)就是把str字符串加载到所选的容器里面。也就是可以局部刷新img-box里面的图片了。

在<head>里面还有一个<base href="http://loacalhost/" />这个对文件的引用要小心一些。我就是一开始jquery.js的引用位置不对，一直不能使用。找了我好久才发现这个问题，哎。

jquery真的很强大。感慨一下jQuery的宗旨：Write Less Do More!