ajax load的效果

目录

最近开始学习jquery,利用jquery进行ajax的操作要方便的多了,下面的实例是一个简单的load效果。参考了这篇文章。利用jquery发起 ajax请求,是很容易的,在参考了上面那篇文章后,就很容易就做一个demo出来。

这就是站在jquery的”肩上“的好处,基本就不用你做那些“底层”的工作了,这也是为什么jQuery号称“The Write Less, Do More”了!

demo的效果很简单,就是发起一个GET请求,在请求过程中显示loading的图片,服务器处理GET请求返回一段html代码(当然,在这里是没有返回html,实际会有的),然后loading状态消失,显示返回的html代码就ok。

这样就很简单的完成了一个ajax实例了。

相关代码如下:

html文件 ajaxload.html


<!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>

<title>ajax loading 效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

#loadingImg{

position:absolute;

width:300px;

top:0px;

left:50%;

margin-left:-120px;

text-align:center;

padding:7px 0 0 0;

font:bold 11px Arial, Helvetica, sans-serif;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

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

//$('#selectclass').change( function (){

$.ajax({

url: 'ajaxload.php',

cache: false,

dataType: 'html',

type:'GET',

data: { name: $('#name').val(),selectclass: $('#selectclass').val()},

error: function(xhr) {

alert('Ajax request 發生錯誤');

},

success: function(response) {

$('#msg').html(response);

$('#msg').fadeIn();

}

});

});

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

$('#msg').html("");

// document.getElementById('msg').innerHTML = "";

});

$("#loadingImg").ajaxStart(function(){

$(this).show();

});

$("#loadingImg").ajaxStop(function(){

$(this).hide();

});

})

</script>

</HEAD>

<BODY>

<div id="loadingImg" style="display:none"><img src="loading.gif"> loading&#8230;</div>

<br><br><br>

<div align="center">

Enter your name <br>

<input type="text" id="name"> <br>

<select id="selectclass">

<option value="1&#8243;>3.1</option>

<option value="2&#8243;>3.2</option>

<option value="3&#8243;>3.3</option>

<option value="4&#8243;>3.4</option>

<option value="5&#8243;>3.5</option>

</select><br>

<input type="button" value="send" id="btn">

<input type="button" value="reset" id="clean">

<br><br><br>

<div id="msg"> </div>

</div>

</BODY>

</HTML>

ajaxload.php

<?php

$myname = $_GET['name'];

$myclass = $_GET['selectclass'];

sleep(1); //为了 ajax loading效果,所以延迟5秒

echo "You input name is $myname <br>";

echo "You select class is $myclass <br>";

?>

ajax loading 时需要用到的一些图片可以在这里ajaxload图片库找到。