博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

mootools中的ajax应用

Posted on 2007-11-03 11:00  迷梦江南  阅读(7551)  评论(1编辑  收藏  举报
 

最近使用脚本框架motors做网站,以下是处理异步更新的代码:

如果没有下载该框架可以到http://www.mootools.net/下载

JS1

    <script type="text/javascript">

        window.addEvent("domready",function(){

            $("send").addEvent("click",function(){

                var url="broadcastmore.aspx?areaid="+$("areaidvalue").value+"&say="+escape($("say").value);
                // escape()
是处理编码函数,没有它传替中文时会出乱码

                new Ajax(url,{method:'post',onComplete:function(){

                    $("Content").innerHTML=this.response.text;

                    alert('发表成功!');

                }}).request();

            });

        });

</script>

HTML1

<div class="main_zh">

                    <div id="Content">

                    </div>

                    <div class="mk">

                        <div class="titlezb">

                            <div class="titleleft">

                                &nbsp;<span class="text">发表评论:</span></div>

                        </div>

                        <div class="mkcontentzb" style="clear: both;">

                            <ul>

                                <li>发表评论:<br>

                                    <textarea class="ins" id="say" name="say" rows="5" cols="50"></textarea>&nbsp;&nbsp;

                                    <input type="submit" id="send" name="send" value="发表" />
                                    <
input id="areaidvalue" type="hidden" value="0" runat="server" /></li>

                                <li></li>

                                <li style="background-image: url(images/dot0.gif); height: 1px; background-repeat: repeat-x;">

                                </li>

                            </ul>

                        </div>

                    </div>

                </div>
在.CS文件里接收参数处理完后,用
                Response.Clear();
                Response.Write("要更新的内容");
                Response.End();
输出到页面上来。

示例二:
HTML&JAVASCRIPT:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>mootools ajax使用示例</title>
    <script type="text/javascript" src="mootools-release-1.11.js"></script>
<script type="text/javascript">
window.addEvent("domready",function(){

    $('btnSent').addEvent('click',function(){
        if($('txtContent').innerText==''){
            alert('发送内容不能空!');
            return;
        }
        var url='Default2.aspx';
        var postData=$("postMessage").toQueryString();
        new Ajax(url,{method:'post',onComplete:function(){
            $('messageBox').innerHTML += this.response.text;
            }
        }).request(postData);
    });

});
</script>
</head>
<body>
    <div style="margin:auto;text-align:center; ">
        <div style=" width:650px; height:700px;">
            <div id="messageBox"></div>
            <hr />
            <form id="postMessage" method="post" name="postMessage" runat="server">
            <div>
                <ul>
                    <li style="list-style-type: none;">请输入您的网名:&nbsp;&nbsp;&nbsp;&nbsp;<input ID="txtName" runat="server" Width="243px" value="填写网名" runat="server"/>
                    </li>
                </ul>
                <ul>
                    <li style="list-style-type: none;">请输入要发送的内容:<textarea ID="txtContent" runat="server" Height="75px" Width="259px" value="填写内容" cols="20" rows="4"></textarea></li>
                        <span style="color:Red;">*</span>
                </ul>
                <ul>
                    <li style="list-style-type: none;"><input type="button" ID="btnSent" runat="server" value="发送"  /></li>
                </ul>
            </div>
            </form>
        </div>
    </div>
</body>
</html>

.CS文件:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            if (!String.IsNullOrEmpty(txtName.Value) && !String.IsNullOrEmpty(txtContent.Value.Trim()))
            {

                string name = txtName.Value.Trim();
                string content = txtContent.Value.Trim();
                string msg = "<div><ul><li>" + name + "说:" + content + "</li></ul></div>";

                Response.Clear();
                Response.Write(msg);
                Response.End();
            }
            else if ( !String.IsNullOrEmpty(txtContent.Value.Trim())&&String.IsNullOrEmpty(txtName.Value) )
            {
                string name = "游客";
                string content = txtContent.Value.Trim();
                string msg = "<div><ul><li>" + name + "说:" + content + "</li></ul></div>";
                Response.Clear();
                Response.Write(msg);
                Response.End();
            }
        }
    }

示例三:
HTML—JAVASCRIPT:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="responserequest.aspx.cs"  Inherits="responserequest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript" src="mootools-release-1.11.js"></script>

    <script type="text/javascript">
        window.addEvent("domready",function(){
            $('myForm').addEvent('submit', function(e) {
                new Event(e).stop();
                if($("message").value==""){
                    alert('请输入要发送的消息');
                    return;
                }
             this.send({
              onComplete: function() {
                  var request=Json.evaluate(this.response.text);
                  $("messagebox").innerHTML=request.msg;
                  $("namebox").innerHTML=request.name;
               alert('发送成功!');
              }
             });
            });
           
        });

    </script>
</head>
<body>
<form id="myForm" action="responserequest.aspx" method="post">
    <div id="namebox"></div>
    <div id="messagebox"></div>
    <input type="text" id="message" name="message"  runat="server" />
  <input type="submit" name="btn" id="btn" value="发送"/>
</form>

</body>
</html>


。CS文件:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class responserequest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string msg = Request["message"];
        string name = "mimengjiangnan:";
        if (!String.IsNullOrEmpty(msg))
        {
            Response.Clear();
            Response.Write(string.Concat("{name:'",name,"',msg:'",msg,"'}"));
            Response.End();
        }
    }
}