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执行完成.