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

    技术2022-05-11  59

    如果您有任何意见,请留下您宝贵的意见以便告知 操作环境: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 你就成功了,假如还有错你得好好检查,面对脚本错误不用着急,一些基本的错误还是会看出来的


    最新回复(0)