mootools框架【一】-Element篇:高级应用举例

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>mootools [一]--Element篇高级应用举例</title>
   <script type="text/javascript" language="javascript" src="mootools-1.2-core-jm.js"></script>
  <script type="text/javascript">
  //为页添加操作事件-domready.
   window.addEvent("domready",function(){
  //为 btnSent 添加 单击事件 .
  $('btnSent').addEvent('click',function(){
    if($('txtContent').innerText==''){
      alert('发送内容不能空!');
      return;
    }
    //Default2.aspx虚构一个页面, 其实是将数据暂存, 然后提取并显示在 messageBox中.
    var url='Default2.aspx';
    var postData=$("postMessage").toQueryString();
    new Ajax(url,{method:'post',onComplete:function(){
      $('messageBox').innerHTML += this.response.text;
      //这里的 innerHTML 方法可以用 setHTML 代替, 因为 innerHTML 是DOM操作中用到的, setHTML是mootools框架中新定义的.
      }
    }).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" value="填写网名"/>
          </li>
        </ul>
        <ul>
          <li style="list-style-type: none;">请输入要发送的内容:<textarea ID="txtContent" runat="server" cols="20" rows="4"></textarea></li>
        </ul>
        <ul>
          <li style="list-style-type: none;"><input type="button" ID="btnSent" runat="server" value="发送" onserverclick="btnSent_ServerClick" /></li>
        </ul>
      </div>
      </form>
    </div>
  </div>
</body>
</html>
后台:
using System;
using System.Data;
using System.Configuration;
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 _Default : System.Web.UI.Page
{
  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();
      }
    }
  }
}

文章来源: http://www.cnblogs.com/ziyiFly/tag/Ajax/

时间: 2016-04-22

mootools框架【一】-Element篇:高级应用举例的相关文章

Knockout应用开发指南 第九章:高级应用举例

原文:Knockout应用开发指南 第九章:高级应用举例 1   Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的,我们可以看看Knockout实现是难了还是容易了. 代码量的多少不重要(尽快Knockout 的实现很简洁),重要的看起来是否容易理解且可读.查看HTML源代码,看看如何实现的view model以及绑定的.     代码: View View Code <h2>Contacts</h2&

老生常谈php中传统验证与thinkphp框架(必看篇)

PHP(超文本预处理器)可用于小型网站的搭建,当用户需要注册登录是,需要与后台数据库进行匹配合格才能注册和登录,传统的方式步骤繁多,需要先连接数据库再用sql语句进行插入. <?php header("Content-type: text/html; charset=utf-8"); $conn =mysqli_connect("localhost","root",""); if (!$conn){ echo "

mootools框架【一】-Element篇:方法完全解析

--内容:封装一些常用的DOM操作 (1).直接可以在xhtml中进行操作元素.而不用嵌套在<script>标签中使用javascript操作. (2).用$代替javascript中document.getElmentById方法.操作元素只需要使用$('myElement')即可. (3).增加了很多方便实用的方法,这些方法使对元素的各种复杂的操作变得容易,摈弃(应该是封装)了原来繁琐的DOM操作.以appendText为例: 方法:appendText 作用:向元素添加文本节点 例子:

mootools框架【八】-Dom篇:Css查询支持之Dom.js

说明:mootools支持通过Css选择器语法来获取元素节点,以最少的代码做最多的事情.在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展. 1.方法:$E 作用:按照css选择器语法获取第一个符合规则的元素 参数: selector:css选择器,如a,#my_div等 filter:可选,过滤范围,默认是document 例子: <div id="myDiv"> <a href="#" id="link1">

mootools框架【五】-String篇:方法完全解析

说明:String大概是使用频率最高的数据类型了,在各个javascript框架中,都或多或少的对String进行了扩展,来提供一些十分方便的方法来处理日常应用.mootools也不例外,String.js中主要实现了这些对String的扩展,还稍微带了点对Array和Number的扩展. --------------------------------String.js--------------------------------------- 1.方法:test 作用:对字符串执行正则表达

mootools框架【四】-Function篇:主要方法解析

内容说明: 闭包是javascript中非常强大的工具,在实际应用开发中,我们基本上都会用到.从各个javascript框架中,我们也可以到处看到闭包的影子.mootools在javascript的Function上扩展出了一些十分方便的创建函数闭包的方法,其中一些我们在prototype.js中也使用过,类如bind,bindAsEventListener等. 对Function的扩展,mootools主要提供了一个create方法来创建闭包,这个方法其实实现了mootools对Functio

mootools框架【二】-Core篇:方法完全解析

说明: Core 类中的核心库是Moo.js和Utility.js,Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装. ---------------------------Moo.js------------------------------------- 1.mootools使用如下形式构建对象: var Cat = new Class({ initialize: function(name){ this.name = name; }});var ca

mootools框架【三】-Array篇:方法完全解析

说明:由于JavaScript1.5对Array增加了一些比较好用的方法,如forEach, filter,map,every,som,indexOf,但是在还不支持JavaScript1.5的浏览器里是不能用得,所以,mootools通过扩展Array来使其实现对这些方法的支持: ---------------------------------Array.js--------------------------------- 1.Array对象的forEach方法 原型:Array.prot

mootools框架【七】-Common篇:mootools的构造应用的基础设施类Common.js

说明: 正因为mootools是基于OO的思想,所以,在mootools自身提供的功能中,充分使用了OO的理念--继承和实现.mootools中提供一组基础功能类:Chain,Events,Options,Group,然后我们可以通过扩展它们来在我们的类中实现它们所提供的功能.mootools自己提供的Ajax,XHR和Fx.Base类就实现了这些基础功能类. 注: 一般情况下,Chain,Events和Options都不会单独使用,都会被别的类扩展(implement),来为这些类提供功能增强