【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据

1、查看代码逻辑

controller的请求代码:
      //跳转vidyoname初始化table
       var name = $routeParams.name;  //路由中获取到传入的name值
       if(name) {  //如果name变量有值
           console.log("name:"+name);  //打印name变量
           $scope.flag = false;  
           $scope.vidyocallflow.vidyoname = name;  //动态绑定将name变量的值赋给作用域集合中vidyoname元素
           
           console.log("vidyocallflow.vidyoname="+$scope.vidyocallflow.vidyoname);  //打印作用域集合中vidyoname元素
           console.log($scope.vidyocallflow);  //打印作用域集合
           console.log($('#vidyoCallFlowForm'));  //打印表单
       btTable.searchDate('vidyoCallFlowForm','/ccao/media/vidyocallflow/query.do');  //通过bootstrap自带的请求searchDate方法将url和表单作为参数,请求到后台。
       }
btTable.searchDate方法:
    //formId 搜索数据的表单;为空时,传NULL
    bootObject.searchDate = function(formId,url) {
        console.info('url:'+url);
        var searchData;
        if(formId==null){
            searchData=null;
        }else{
            searchData = $('#' + formId + '').serialize();  //通过上传的表单id获取表单中的所有值
        }
        var tmp = '?';
        /*if(url.contain('?')|| url.contain("&")){
            tmp = '';
        }*/
        $('#' + tableId + '').bootstrapTable('refresh', {
            url : '' + url + tmp + searchData,
        })  //bootstrap表格自带请求并填充表格的方法
    };

2、通过日志打印,发现绑定的作用域集合vidyoname有值,且作用域集合和表单打印出来,其中的vidyoname都有值,在弹出的VidyoCallFlow页面的name的input框中也有数据填充,说明双向绑定赋值是成功的,但是在使用 btTable.searchDate方法,传入表单名和url时,查询不到结果,且发现请求到后台的url为:"url:/ccao/media/vidyocallflow/query.do?vidyoname=",参数vidyoname没有值带入,通过后台日志发现确实该请求没有参数传到后台,也说明了在使用bootstrap自带请求方法时,没有从表单中获取到vidyoname的值,因此请求没有携带该参数的值。

3、但是再次通过点击VidyoCallFlow页面的搜索按钮时,触发页面的点击事件,该事件执行的请求方法与跳转请求的方法相同,同为bootstrap自带的请求方法,但是传入后台参数有值,且查询有结果。

4、原因:在路由跳转双向绑定数据时,存在通过jquery获取不到表单中元素的值的问题,后采用jquery赋值的方法替代将双向绑定的方法:
       //跳转vidyoname初始化table
       var name = $routeParams.name;
       if(name) {
           console.log("name:"+name);
           $scope.flag = false;
           $('#vidyoname').val(name);  //jquery赋值
           
       btTable.searchDate('vidyoCallFlowForm','/ccao/media/vidyocallflow/query.do');       

}

5、查询成功,跳转获取到页面查询结果。

时间: 2024-10-23 16:27:55

【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据的相关文章

深入理解vue.js双向绑定的实现原理_javascript技巧

前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin

ajaxSubmit提交表单数据,数据过多报500错误

问题描述 ajaxSubmit提交表单数据,数据过多报500错误 ajaxSubmit提交表单数据,数据过多,用fireBug调试,报500错误.表单中method="post" 解决方案 post 请求方法原则上是没有大小限制的, 更多的原因可能出现在你的参数格式上,比如 数字 整型的确有小数点,日期格式不规范等.最好用排除法 依次添加参数判断是哪个格式有问题 解决方案二: 数据少的时候就是可以提交的 解决方案三: 500服务器错误,你看看是不是配置文件可以设置默认大小了

【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据

原文:[ASP.NET Web API教程]5.2 发送HTML表单数据:URL编码的表单数据 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. 5.2 Sending HTML Form Data 5.2 发送HTML表单数据 本文引自:http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1 By Mike Wasson|

使用Object.defineProperty实现简单的js双向绑定_javascript技巧

缘起 前几天在看一些流行的迷你mvvm框架(比如avalon.js. vue.js 这种较轻的框架,而非Angularjs.Emberjs这种较重的框架)的实现.现代流行的mvvm框架一般都会将数据双向绑定(two-ways data binding)做掉,作为框架自身的一个卖点( Ember.js 貌似是不支持数据双向绑定的.),而且每种框架双向数据绑定的实现方式都不太一致,比如Anguarjs内部使用的是 脏检查 ,而avalon.js内部实现方式的本质是设置 属性访问器 . 这里不打算具体

jsp Servlet基础入门学习:处理表单数据

js|servlet|数据     4.1 表单数据概述 如果你曾经使用过Web搜索引擎,或者浏览过在线书店.股票价格.机票信息,或许会留意到一些古怪的URL,比如"http://host/path?user=Marty+Hall&origin=bwi&dest=lax".这个URL中位于问号后面的部分,即"user=Marty+Hall&origin=bwi&dest=lax",就是表单数据,这是将Web页面数据发送给服务器程序的最

ASP.NET MVC案例教程(基于ASP.NET MVC beta)—第四篇:传递表单数据

前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单 数据.例如,我们将要实现的公告发布功能,用户肯定是在某个表单页面输入标题.正文等内容,而后提交,然后表单数据要被传递到相应的 地方交由业务逻辑组件处理. 在传统的ASP.NET下,使用的是Model1模式,每个aspx页面有一个同名的aspx.cs文件,当提交表单时,默 认数据被提交到这个同名aspx.cs文件中某个方法下处理.但是,在ASP.NET MVC中,这种方

控制-JS如何显示和隐藏一个表格中的所有表单输入框。

问题描述 JS如何显示和隐藏一个表格中的所有表单输入框. 现在是想要把表格的补货一栏去掉,在表格底部加一个按钮,点击以后 已补货的数字变成输入框.然后再次点击以后提交. 我想要的是一个按钮,控制所有"已补货"列,所有数字都变成输入框. 控制表格里面加了class是content的数据, 点击以后 <span class=content>0</span> 变输入框,其他列数据不要变. <tr> <td> </td> <td

如何实现网页全屏显示,并不丢失表单数据,代码如下:

问题描述 <!--#includefile="inc/config.asp"--><!--#includefile="inc/conn.asp"--><!--#includefile="inc/class.asp"--><SCRIPTlanguage="JavaScript">functionFkey(){varWsShell=newActiveXObject('WScript.

jquery ajax 如何向jsp提交表单数据_jquery

AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后