【Dojo学习之六】Ajax 数据接受和发送
发布时间:2020-12-16 00:51:34 所属栏目:百科 来源:网络整理
导读:在各种javascript都展示其Ajax的情况下,怎么能少了Dojo, 它的实现就更简单了,不多说,上代码! 1.dojo Ajax 数据接受 前台html页面 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlheadmeta
在各种javascript都展示其Ajax的情况下,怎么能少了Dojo, 它的实现就更简单了,不多说,上代码! 1.dojo Ajax 数据接受 前台html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> dojo Ajax 数据接受</title> <style type="text/css"> @import "./dojo/dojo/resources/dojo.css"; @import "./dojo/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" djConfig="parSEOnLoad: true,isDebug: true" src="./dojo/dojo/dojo.js"></script> <style type="text/css"> #container { border:1px dotted #b7b7b7; background:#ededed; width:75px; height:55px; } </style> <script type="text/javascript"> var init = function(){ var contentNode = dojo.byId("content"); dojo.xhrGet({ url: "sample.txt",handleAs: "text",load: function(data,args){ // fade out the node we're modifying dojo.fadeOut({ node: contentNode,onEnd: function(){ // set the data,fade it back in contentNode.innerHTML = data; dojo.fadeIn({node: contentNode}).play(); } }).play(); },// if any error occurs,it goes here: error: function(error,args){ console.warn("error!",error); } }); }; dojo.addOnLoad(init); </script> </head> <body> <div id="container" class="box"> <div id="content"> I am some Inner Content. I am going to be replaced </div> </div> </body> </html>
I am a <em>remote</em> file. We used Ajax to put this text in our page. 2.dojo Ajax 数据发送 前台页面 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> dojo Ajax 数据发送</title> <style type="text/css"> @import "./dojo/dojo/resources/dojo.css"; @import "./dojo/dijit/themes/tundra/tundra.css"; </style> <script type="text/javascript" djConfig="parSEOnLoad: true,isDebug: true" src="./dojo/dojo/dojo.js"></script> <style type="text/css"> #container { border:1px dotted #b7b7b7; background:#ededed; width:75px; height:55px; } </style> <script type="text/javascript"> //sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ url: "alternate-submit.php",form: "mainForm",handle: function(data,args){ if(typeof data == "error"){ console.warn("error!",args); }else{ // show our response console.log(data); } } }); }; dojo.addOnLoad(function(){ var theForm = dojo.byId("mainForm"); // another dojo.connect syntax: call a function directly dojo.connect(theForm,"onsubmit",formSubmit); }); </script> </head> <body> <form id="mainForm" action="ajax-submit.php" method="post"> <label for="firstName">Name: </label> <input type="text" id="firstName" value="Enter Name" name="firstname"/> <input type="submit" value="submit" /> </form> </body> </html> 请求的 后台 alternate-submit.php 页面代码 <?php print "DATA RECEIVED:"; print "<ul>"; foreach($_REQUEST as $key => $var){ print "<li>".$key." = ".$var."</li>"; } print "</ul>"; ?> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |