jquery实现ajax,这么看起来还是蛮简单的。代码量极少。重点是搞清楚几个概念。
- <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>
- 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!