标题 | 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执行完成. |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。