最近使用脚本框架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">
<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>
<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;">请输入您的网名: <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();
}
}
}