jQuery之ajax实例

jQuery之ajax实例

来源：阅读：3591 次日期：2014-08-13 16:28:10

温馨提示：小编为您整理了“jQuery之ajax实例”,方便广大网友查阅！

jquery第十九课,在前一课学习了jQuery的ajax参数的设置,本节直接通过实例来进行ajax的介绍,并分析ajax的参数设置等.

参考共用代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>jquery特效处理-前台代码</TITLE>

$(function(){//

$("#cn").bind("click",function(){//绑定后面的按钮click事件

//ajax代码区

});});

</SCRIPT>

<BODY>

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

先介绍这三个,明天继续介绍

更多信息请查看IT技术专栏

手机网站地址：jQuery之ajax实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！