JavaScript界面传值与前后台互调

最新推荐文章于 2024-11-13 17:27:29 发布

weixin_30820077

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量80

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/Sientuo/p/6211353.html

版权

话说曾在校时，前端的第一门课程HTML静态网页设计，其老师，真是应了他的名字：路遥知马力。整个学期硬是全部在 Dreamwear 中进行拖拽控件来教学，未曾教授一句代码。成功忽悠了全体学生，课上一本正经的胡说八道，对拖拽控件的心得侃侃而谈，想想也是讽刺，同期的学生都是纯手写编辑界面，我们却依旧沉浸在设计下的拖拽操作中，带来的就是界面看起来还像回事，只是源码惨不忍睹，后来有幸在网上观看了燕十八老师的HTML系列视频，犹如冬服参汤，醍醐灌顶。使我终没有在拖拽的路上越走越远。

1.前台界面互调传值，就是子界面与父界面之间的那些事

①父界面传值到子界面在子界面中使用opener方法来说获取父界面元素

    <script type="text/javascript">
        function getfather() {
            var a = window.opener.document.getElementById("txt1").value;
            var b = window.opener.document.getElementById("txt2").value;
            console.log(a);
            console.log(b);
        }
       
    </script>

如上图所示，txt1、txt2 为父界面中两个textbox 的 ID 属性值，这样就可以直接接受值，纯前台界面之间的操作

②子界面传值到父界面，同样可以在子界面中用 opener 来解决，同上，只是给等号右边的表达式赋值而已。当然，方法有很多种，解决问题时只需要一种，对于初学者，其他的方法了解就可，需要先是广度，深度的事情，研究起来内容很多，需要下大量的功夫，时间也是等倍计算。当然我这里不是误导，时时刻刻积累，每天睡前想想又 get 到哪些新技能。

本着技术不够，数量来凑的思想来说说Web from 中前后台的控件的情况

2. 函数执行顺序，对于一般按钮而言，可以设置 OnClick、OnClientClick、OnCommand事件，执行顺序如下：

①OnClientClick 调用JS中设置的方法

②OnClick 按钮单击事件，在OnClientClick 事件之后执行

③OnCommand 在OnClick 事件执行，一般是结合CommandName 属性一起使用，当界面上有多数按钮时，可以进行标记

3. 前台方法中设置判断，是否执行 OnClick 事件

 <script type="text/javascript">
     function Todu() {
         var txtbd = document.getElementById("txtbd").value;
         if(parseInt(txtbd)!=2) {
             alert("回答錯誤，無法進行進入後台");
             return false;     //添加此處
         }
         else {
             alert("我將要執行後台方法");
         }
     }
 </script>

默认情况下，OnClientClick 事件执行完，是要执行 OnClick 事件的，在前台做判断时，需要设置两个地方，其一是在方法中添加，如上图注释处，其二如下图，在OnClientClick 事件中加入 return false();

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lab" runat="server"></asp:Label>
        <br />
        <asp:TextBox ID="txtbd" runat="server"></asp:TextBox>
        <asp:Button ID="btn_to" runat="server"  Text="ToBaidu" OnClick="btn_to_Click" OnClientClick="Todu(); return false();"/>
    </div>
    </form>
</body>

4.后台调用前台方法

① 在Page_load 里面给某个按钮绑定前台方法（注：和前端调用略有不同，false 后面没有括号）

       protected void Page_Load(object sender, EventArgs e)
       {
           btn_to.Attributes.Add("onclick", "javascript:return Todu(); return false;");
       }

② 在某个按钮事件或方法中绑定前台方法

        protected void btn_id_Click(object sender, EventArgs e)
        {
            //在前台腳本裡面增加一個script： window.open('B.aspx')；
            this.ClientScript.RegisterStartupScript(this.GetType(), "", "window.open('B.aspx')", true);
            //在前台腳本裡面增加一個script： icc();    注：沒有true
            this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>icc();</script>");
            //在前台腳本裡面增加一份script:    alert("123");   注：单/双引号
            Response.Write("<script type='text/javascript'>alert('123');</script> ");
          
        }

5. 前台调用后台方法

        public int After() 
        {
            return 233;
        }

        public int After2(int a, int b) 
        {
            return a + b;
        
        }

比如后台有以上两个方法，一个带参数，一个不带参数，那么在前台的方法中，若调用后台方法，如下：

     function iafter() {
         var b = "<%=After()%>";
         alert(b);
     }

     function iafter2()
     {
         var b = "<%=After2(5,8)%>";
         alter(b);
     }

以上这些都是很浅显的点，不管怎样，也是记录我这个小白路上的一个脚印，权当作学习笔记。

----------------------------------市人皆大笑，举手揶揄之

转载于:https://www.cnblogs.com/Sientuo/p/6211353.html