zoukankan      html  css  js  c++  java
  • mootools中的ajax应用

     

    最近使用脚本框架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=" 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();
            }
        }
    }


  • 相关阅读:
    PfSense基于BSD的软件防火墙的安装、配置与应用
    Puppet安装与配置简介(附视频教程)
    Vmware ESX5i 环境下部署Windows Storage Server 2008 R2
    揭秘TPM安全芯片技术及加密应用
    WebRTC实现网页版多人视频聊天室
    Oracle-BPM安装详解
    Specifying the Code to Run on a Thread
    Processes and Threads
    64、ORM学员管理系统-----联合查询
    拦截导弹
  • 原文地址:https://www.cnblogs.com/mimengjiangnan/p/947735.html
Copyright © 2011-2022 走看看