标题 | jQuery之ajax实例 |
范文 | 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执行完成. 先介绍这三个,明天继续介绍 |
随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。