用简易Ajax框架实现"加减乘除"运算【原创】

最新推荐文章于 2019-07-08 15:14:08 发布

zhulei2008

最新推荐文章于 2019-07-08 15:14:08 发布

阅读量3.2k

点赞数

分类专栏： Ajax 文章标签： ajax框架 ajax 服务器 string generator javascript

本文链接：https://blog.csdn.net/zhulei2008/article/details/1515656

版权

Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果您有任何意见,请留下您宝贵的意见以便告知
操作环境:Visual Studio.Net2003
操作系统:window Xp SP2

就上次分析的简易Ajax框架一篇没能给你带来什么，只能告诉你，或者是对Ajax的进一步理解，现在用那个框架实现简单的加减乘除运算，希望能给你带来点什么

显示的页面：

Calculate.aspx

<%@ Page language="c#" Codebehind="Calculate.aspx.cs" AutoEventWireup="false" Inherits="AjaxFrmClass.Calculate.Calculate" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
     <HEAD>
         <title>Calculate</title>
         <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
         <meta name="CODE_LANGUAGE" Content="C#">
         <meta name="vs_defaultClientScript" content="JavaScript">
         <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
         <script language="jscript" src="../Javascript/CallBackObject.js"></script>
         <script language="jscript">
            function DoCalculate()
            {
                var f = document.Form1;
                if((f.num1.value !="") && (f.num2.value!= "" ))
                {
                    var cbo = new CallBackObject();
                    cbo.OnComplete = Cbo_Complete;
                    cbo.onError = Cbo_Error;
                    cbo.DoCallBack("Ajax.aspx?num1="+f.num1.value+"&num2="+f.num2.value+"&drpSelect="+ f.drpSelect.value);
                }
                else if(f.num1.value == "" )
                {
                    document.getElementById("lblMessage").innerHTML = "第一个数不能为空!" ;
                }
                else if(f.num2.value == "" )
                {
                    document.getElementById("lblMessage").innerHTML = "第二个数不能为空!" ;
                }

            }


            function Cbo_Complete(responseText, responseXML)
            {
                alert(responseText);
            }



            function Cbo_Error()
            {
                alert(responseText);
            }

        </script>
     </HEAD>
     <body MS_POSITIONING="GridLayout">
         <form id="Form1" method="post" runat="server">
             <TABLE id="Table1" style="Z-INDEX: 105; LEFT: 224px; WIDTH: 192px; POSITION: absolute; TOP: 216px; HEIGHT: 80px"
                cellSpacing ="1" cellPadding="1" width="192" border="1">
                 <TR>
                     <TD bgcolor="#ff9933" style="WIDTH: 44px; HEIGHT: 7px" colSpan="4">
                         <DIV style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 18px" ms_positioning="FlowLayout">基于Ajax的简单计算</DIV>
                     </TD>
                 </TR>
                 <TR>
                     <TD style="WIDTH: 56px; HEIGHT: 24px">
                         <INPUT id="num1" style="WIDTH: 59px; HEIGHT: 22px" type="text" size="4"></TD>
                     <TD style="WIDTH: 46px; HEIGHT: 24px">
                         <SELECT id="drpSelect" style="WIDTH: 50px">
                             <OPTION value="jia" selected>+</OPTION>
                             <OPTION value="jian">-</OPTION>
                             <OPTION value="cheng">*</OPTION>
                             <OPTION value="chu">/</OPTION>
                         </SELECT>
                     </TD>
                     <TD style="WIDTH: 50px; HEIGHT: 24px">
                         <INPUT id="num2" style="WIDTH: 48px; HEIGHT: 22px" type="text" size="2"></TD>
                     <TD style="HEIGHT: 24px">
                         <INPUT id="btnCalculate" type="button" onclick="DoCalculate()" value="计算"></TD>
                 </TR>
                 <TR>
                     <TD style="WIDTH: 56px" colSpan="4">
                         <DIV id="lblMessage" style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 16px" ms_positioning="FlowLayout"></DIV>
                     </TD>
                 </TR>
             </TABLE>
         </form>
     </body>
</HTML>

Calculate.aspx .cs里面不需要做处理，因为我们要的是客户端的异步回掉

解释下：<script language="jscript" src="../Javascript/CallBackObject.js"></script> 这里指代的CallBackObject.js就是另篇文章简易Ajax框架，你可以讲代码Copy出来就可以了

以上是客户端，Ajax已经发送请求到服务器端了，下面看看服务器端的处理过程

Ajax.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace AjaxFrmClass.Calculate
{
    /// <summary>
     /// Ajax 的摘要说明。
    /// </summary>
    public class Ajax : System.Web.UI.Page
    {
        private void Page_Load(object sender, System.EventArgs e)
        {
            string number1 = HttpContext.Current.Request.QueryString["num1" ];
            string number2 = HttpContext.Current.Request.QueryString["num2" ];
            string fuhao = HttpContext.Current.Request.QueryString["drpSelect" ];

            int i = 0 ;
            int j = 0 ;

            bool status =  true ;

            if(number1 != null )
            {
                try
                {
                    i = int .Parse(number1);
                }
                catch (Exception errExce)
                {
                    Response.Write(errExce.Message);
                }
            }

            if(number2 != null )
            {
                try
                {
                    j = int .Parse(number2);
                }
                catch (Exception  errExce1)
                {
                    Response.Write(errExce1.Message);
                }
            }

            if (status)
            {
                switch (fuhao)
                {
                    case "jia" :
                        Response.Write(i+ j);
                        break ;
                    case "jian" :
                        Response.Write(i- j);
                        break ;
                    case "cheng" :
                        Response.Write(i* j);
                        break ;
                    default :
                        Response.Write(i/ j);
                        break ;
                }
                Response.End();
            }
        }

        #region Web 窗体设计器生成的代码
         override protected void OnInit(EventArgs e)
        {
            //
             // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
             //
            InitializeComponent();
            base .OnInit(e);
        }

        /// <summary>
         /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this .Page_Load);
        }
        #endregion
    }
}

同样，Ajax.aspx客户端中也不要做任何的处理，因为请求传到了服务器端，只要在服务器端做处理就行了

做到这步，如果你是按照我的步骤往下走的，Ctrl + F5 你就成功了，假如还有错你得好好检查，面对脚本错误不用着急，一些基本的错误还是会看出来的

zhulei2008

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用简易Ajax框架实现"加减乘除"运算【原创】

如果您有任何意见,请留下您宝贵的意见以便告知操作环境:Visual Studio.Net2003操作系统:window Xp SP2 就上次分析的简易Ajax框架一篇没能给你带来什么，只能告诉你，或者是对Ajax的进一步理解，现在用那个框架实现简单的加减乘除运算，希望能给你带来点什么显示的页面：Calculate.aspx @ Page language="c#" Codeb
复制链接

扫一扫