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

简介: 在做项目的时候,在VidyoCallFlowEntry页面中,通过name字段双击跳转弹出VidyoCallFlow页面,同时传入name的值作为参数进行查询,并展示查询结果。但在路由中获取到name的值,通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值,发现并没有查询到结果,但是根据该name的值在数据库中查询,是有结果的。
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、查询成功,跳转获取到页面查询结果。
目录
相关文章
|
1月前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
30 2
|
25天前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
37 0
|
1月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
1月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
28天前
|
JSON JavaScript 数据格式
js实现更新数据
js实现更新数据
36 1
|
1月前
|
前端开发 JavaScript 安全
JavaScript——数字超过精度导致数据有误
JavaScript——数字超过精度导致数据有误
28 2
|
1月前
|
JavaScript 前端开发
JavaScript中通过按回车键进行数据的录入
这篇文章提供了一个JavaScript示例代码,演示了如何通过监听回车键(keyCode为13)在网页上实现数据的录入和触发一个警告框提示"正在登录验证......"。
JavaScript中通过按回车键进行数据的录入
|
1月前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
1月前
|
JavaScript 算法 数据安全/隐私保护
烯牛数据JS逆向:MD5数据加密?不存在的!
烯牛数据JS逆向:MD5数据加密?不存在的!
53 1
|
1月前
|
JavaScript 前端开发 网络协议
抖音直播弹幕数据逆向:websocket和JS注入
抖音直播弹幕数据逆向:websocket和JS注入
139 1