话说曾在校时，前端的第一门课程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)!=) {

             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 ;

        }

        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);

     }

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

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

JavaScript界面传值与前后台互调的更多相关文章

  1. silverlight 中javascript 代码与托管代码的互调用 以及一些思考

    silverlight 客户端javascript 代码与托管代码的互调用时比较用意义的同时,因为silverlight本身就是一个插件,如果两者之间不能进行相互的调用,对于web 上的一些特殊的功能 ...

  2. 属性传值，协议传值，block传值，单例传值四种界面传值方式

    一.属性传值 对于属性传值而言,相对于其它的三种 方法来说,是最基础,最简单的一种 方法,但,属性传值 有很大的局限性,因为是适用于第一个界面向第二个界面传 值,第二个向第三个界面传值等等.N界面向N ...

  3. 新手介绍简单一下iOS开发中几种界面传值

    首先在处理iOS-UI中,也许在很多地方需要用到两种甚至多种不同界面之间的传值,相比这也是很多iOS入门成员头疼问题,同样作为新手的我在接触这类传值时候也一脸懵然,经过一段时间的研究,对于简单的传值有 ...

  4. JavaScript URL传值过程中遇到的问题及知识点总结

    JavaScript URL传值过程中遇到的问题及知识点总结 Web系统开发过程中经常用到URL进行传值,刚刚接触时不太会解析,会出现中文乱码问题等. 1.父子页面之间的传值(在一个页面中以加载ifr ...

  5. iOS-跨界面传值和跨应用传值

    跨界面传值 从一个界面将一个结果值传到另一个界面,这个是我们在开发过程中非常常见的一个问题.传值本身并不是一个太复杂的问题,在此主要简述一下常用的传值方法. 我们传值常用的方法主要有四种: 1.属性传 ...

  6. iOS UI08_TableView界面传值

    实现两个界面之间内容的传递 // // MainViewController.m // UI08_TableView界面传值 // // Created by dllo on 15/8/7. // C ...

  7. iOS开发 — (UINaVigationController)导航控制器,界面传值

    UINavigationController 继承于 UIViewController , 以栈的方式管理所 控制的视图控制器 . 至少要有一个被管理的视图控制器 ,这个控制器我们称作导航控制器的根视 ...

  8. 讲清楚之 javascript 参数传值

    讲清楚之 javascript 参数传值 参数传值是指函数调用时,给函数传递配置或运行参数的行为,包括通过call.apply 进行传值. 在实际开发中,我们总结javascript参数传值分为基本数 ...

  9. 静态界面传值javascript

    一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码代码如下: <input type="text" n ...

随机推荐

  1. PHPUnit入门

    PHPUnit是PHP语言的单元测试框架.工具,xunit单元测试工具系列成员之一,可以单独运行在Linux或windows系统下面,也可以集成到zend studio等IDE工具中. 工具下载:ht ...

  2. Oracle数据库基础知识2

    字符操作相关_1 1.CONCAT关键字作用:连接字符串语法:CONCAT(字串1, 字串2)例如: CONCAT('hello','world') FROM DUAL; 注意:Oracle的CONC ...

  3. SQL的四种连接-左外连接、右外连接、内连接、全连接

    今天在看一个遗留系统的数据表的时候发现平时查找的视图是FULL OUT JOIN的,导致平时的数据记录要进行一些限制性处理,其实也可以设置视图各表为右外连接并在视图上设置各列的排序和筛选条件就可以达到 ...

  4. WordPress忘记登录密码

    后台的登录密码使用的是md5加密的,有时候会忘记登录密码,那么可以修改数据库,把密码改为你知道的字符串的md5加密值 如 hello对应的md5加密值为:5d41402abc4b2a76b9719d9 ...

  5. 级联两个bootstrap-table。一张表显示相关的数据，通过点击这张表的某一行，传过去对应的ID，刷新另外一张表。

    二张表的代码(我用的插件,大家可以去网上直接下载http://issues.wenzhixin.net.cn/bootstrap-table/): <div class="contai ...

  6. MSSQL 全表搜索 指定字符串

    平时在在MSSql中查询数据的时候,想查找,某个字段在数据库中是否存在,并且查询出在哪个表中,哪个字段下面,在不知道的情况下,操作起来会很麻烦,然后就写了一个sql语句,使用起来感觉挺方便的.当然了, ...

  7. 五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  8. Android 解析Json_fastJson

    FastJSON是一个很好的java开源json工具类库,相比其他同类的json类库,它的速度的确是fast,最快!但是文档做得不好,在应用前不得不亲测一些功能.   实际上其他的json处理工具都和 ...

  9. Python之路----------基础 一（数据类型、变量、基本语法、流程控制）

    一. 数据类型与变量 1.数据类型 整数   #Python在程序中的表示方法和数学上的写法一模一样,-1,0,1都是整数. 浮点数  1 #浮点数就是小数. 字符串 1 #在Python中字符串是以 ...

  10. VC工程中文件的编译顺序

    用联合编译工具能减少大量编译时间,然而如果工程里有个大型cpp文件,其他文件都编译好了只等着它... 两步解决问题: 1.将大文件分散到多个小cpp里面,加快并发,减少单个文件编译时间 2.优先编译大 ...