【Dojo学习之六】Ajax 数据接受和发送

最新推荐文章于 2022-06-03 15:26:10 发布

365Marathon

最新推荐文章于 2022-06-03 15:26:10 发布

阅读量867

点赞数

分类专栏： Dojo 文章标签： Dojo Ajax 数据

本文链接：https://blog.csdn.net/victoryboss/article/details/12772441

版权

Dojo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在各种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>

请求的文件 sample.txt 中的内容

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", 
        handleAs: "text", 
        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>";  
?>