jQuery之ajax实例
http://%77w%77%2E%66%6F%72%61%73%70%2E%63n网站制作学习
jquery第十九课,在前一课学习了jQuery的ajax参数的设置,本节直接通过实例来进行ajax的介绍,并分析ajax的参数设置等.
参考共用代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>jquery特效处理-前台代码</TITLE>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="javascript">
$(function(){//<!--www.forasp.cn jquery代码区-->
$("#cn").bind("click",function(){//绑定后面的按钮click事件
//ajax代码区
});});
</SCRIPT>
<BODY>
<input type="text" maxlength="20" id="forasp"> <input type="button" value="jquery的ajax测试" id="cn">
</BODY>
</HTML>
(1)用GET的提交形式ajax实例分析
$.ajax({type:"GET",dataType:"text",data:"foraspcnurl="+$("#forasp").val(),url:"index.php",success:function(msg){alert(msg);}
index.php代码如下
<?echo $_GET["foraspcnurl"];?>
分析:提交方式type:GET,数据类型data:text,数据foraspcnurl=id为forasp的text的值,发送请求地址url:index.php,成功返回success函数:function(msg){},msg为返回的数据
运行:在文本框填写"网站制作学习网",点击按钮弹出"网站制作学习网"
(2)用POST提交形式提交ajax实例
$.ajax({type:"POST",catch:false,dataType:"text",data:"foraspcnurl="+$("#forasp").val(),url:"index4.php",success:function(msg){alert(msg);}
index.php代码如下
<?echo $_POST["foraspcnurl"];?>
分析:基本跟GET方式相似,多了个是否缓存catch:false,不缓存该页面.加这个cache更明白cache用法.在请求的url代码不一样了由原来的$_GET变成了$_POST这事根据提交形式来定的.
(3)通过ajax看参数context(类型object),dataType(数据类型string),beforeSend的使用
$.ajax({
type:"POST",
cache:false,dataType:"text",
data:"foraspcnurl="+$("#forasp").val(),
url:"index4.php",
success:function(msg){alert(msg);},
complete:function(){alert("完成ajax事件")},
beforeSend:function(){return confirm("检查数据,确实提交吗?");}
});
运行试试,首先用beforeSend,弹出"检查数据,确实提交吗?",如果点击确定返回true,则继续ajax,如果不是,则停止执行ajax,当确定后则执行,首先弹出输入的内容,然后弹出ajax执行完成.
先介绍这三个,明天继续介绍
http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E