AngularJS序列化表单数据

2024-02-11

我希望在 angularjs 中序列化表单数据。以下是控制器代码:

   function SearchCtrl($scope, $element, $http) {
        $scope.url = 'php/search.php';
        $scope.submit = function() {
            var elem = angular.element($element);
            //var dt = $(elem.parent()).serialize();
            console.log($(elem.parent()).serialize());
            $http({
                method: 'POST',
                url: $scope.url,
                data: 'first=hgf&last=ghfgh',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data; // Show result from server in our <pre></pre> element
                //var elem = angular.element(e.srcElement);
                //alert($(elem.parent()).serialize());
            }).error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
            return false;
        };
}

edited:

    <!DOCTYPE html>
<html ng-app>
<head>
<title>Search form with AngualrJS</title>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/search.js"></script>



</head>
<body>
        <div>
        <form ng-controller="SearchCtrl" ng-submit="submit()">
            <label>Search:</label>
            <input type="text" ng-model="keywords" placeholder="enter name...">
            <input type="text" ng-model="desc" placeholder="enter description...">
            <button type="submit">Search</button>
            <p>Try for example: "php" or "angularjs" or "asdfg"</p>
        </form>
<pre ng-model="result">
{{result}}
</pre>
   </div>
</body>

</html>

但控制台上没有打印任何内容。我哪里出错了?


来自doc http://api.jquery.com/serialize/:

对于要包含在序列化字符串中的表单元素的值, 该元素必须有一个 name 属性。

在您的 HTML 输入中没有名称,因此serialize返回一个空字符串。用类似的东西解决这个问题...

<input type="text" name="keywords" ng-model="keywords" placeholder="enter name...">
<input type="text" name="desc" ng-model="desc" placeholder="enter description...">

而且,顺便说一句,你不必包装 Angular$element进入 jQuery 函数:$element.serialize()可以正常工作。

Demo. http://jsfiddle.net/LGBAU/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS序列化表单数据 的相关文章

  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 类型错误:无法读取未定义的属性“defaultPrevented”

    当我进行以下测试时 我收到此错误 it should call pauseAnimationInterval if in focus inject function SearchBoxData intervalManager timeout
  • jQuery 选择 # id 以单词为前缀,计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • javascript中按tab键时如何调用函数?

    我有一个这样的功能 function whenEmpty field if field value field style backgroundColor ffcccc alert Please fill the field field f
  • 如何像在 jQuery 中一样在 AngularJS 中触发事件?

    是否可以做类似的事情 container trigger click 仅使用 AngularJS 如果不可能trigger 还有其他方法来管理这种行为吗 我有一个基本示例 可以在单击按钮时创建一个框 创建的框是可拖动的 现在 用户必须单击按
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • 如何让 jquery Tooltipster 插件适用于新创建的 DOM 元素?

    我正在使用 Tooltipster 插件http calebjacob com tooltipster http calebjacob com tooltipster 这很棒 但我已经动态生成了插入到 DOM 中的内容 工具提示程序似乎没有
  • 如何流式传输 OpenAI 的完成 API?

    我想流式传输结果通过 OpenAI 的 API 完成 https beta openai com docs api reference completions 该文档提到使用服务器发送的事件 https developer mozilla
  • JSON 数组到 C# 列表

    如何将这个简单的 JSON 字符串反序列化为 C 中的列表 on4ThnU7 n71YZYVKD CVfSpM2W 10kQotV 这样 List
  • IE 中的 jQuery .width(val) 错误 - 无效参数

    通过ajax加载内部div book table 后 我想调整正文的宽度以适应更大的内容 var new width parseInt book table css width 407 body width new width 在 FF 和
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值

随机推荐

  • 一次对多个 YuvImage 使用 compresstojpeg 时内存不足

    我正在构建一个缓冲应用程序N相机帧 当用户点击按钮时 它会使用所有保存的帧应用效果来保存照片 我正在保存照片并在异步任务 当我执行它时 我会从屏幕上删除所有内容 只留下一个TextView显示保存照片的进度 目前异步任务 doInBackg
  • 使用 useState 和 useContext React Hooks 持久化 localStorage

    我已经设置了一个提供程序来为用户共享一些状态useContext 因此 我试图利用本地存储来保存用户图像 头像等 的一些状态 首先 我尝试保留用户的头像 本质上是从 Express 中保存他们的 ID 然后在调用 Cloudinary 一种
  • 返回 PostgreSQL 中插入的行

    我目前正在开发一个报告生成 servlet 它聚合来自多个表的信息并生成报告 除了返回结果行之外 我还将它们存储到报告表中 以便以后不需要重新生成它们 并且如果擦除它们所提取的表 它们将持续存在 为了执行后者 我有一个以下形式的语句 注意
  • C# 中是否有存储优化的稀疏矩阵实现?

    有没有优化过的存储稀疏矩阵 http en wikipedia org wiki Sparse matrix在C 中的实现 有Math NET http www mathdotnet com 它有一些备用矩阵实施 http nmath so
  • 在Python中将微秒增量转换为各自转换的最佳方法?

    我目前有一个预定义的字典 忽略字母 不过 我希望转换更加稳健 假设输入 33000000 微秒并知道转换为 33 秒 然后 一分钟以上但一小时以下的任何微秒输入都会显示为分钟等 是否可以在不需要此预定义字典的情况下获得此编码 最好是一个函数
  • 如何解决python中pydicom的编码问题

    这是代码 import dicom ds dicom read file FILE PATH print ds Error LookupError unknown encoding ISO 2022 IR 100 当使用 pydicom 查
  • 冻结 EPPlus 中的列(Excel 拆分函数)

    我一直在使用 EPPlus 来生成 Excel 文件 以满足我的项目要求我进行的导出数量 他们想要的大多数导出往往与他们遗留系统中已有的导出完美匹配 然而 其中之一 他们想要不同 他们希望它看起来与遗留系统的导出之一一模一样在他们完成一些典
  • COM + 等待单对象

    在过去的几天里 我一直在努力为一个应用程序找到一个好的架构 经过一番研究后 我终于陷入困境 原因就是 COM 相关应用程序将有多个 GUI 线程 它们将为工作线程安排工作项 工作线程将通过 CoInitialize NULL 初始化 COM
  • 如何将 ng-href 与绝对 url 一起使用?

    我对 AngularJS 仍然很陌生 我有一个问题 我似乎无法找到解决方案 而且我没有时间去研究 Angular 源代码 这是我的场景 我有一些 json 数据 其中包含我想在屏幕上显示的 url 集合 我有一个元素ng repeat li
  • 如何修复这些漏洞? (npm 审核修复未能修复这些漏洞)

    我的项目有 6 个高严重性漏洞 我不知道如何修复它们 npm 审核修复失败 请帮我解决这个问题 我正在安装https www npmjs com package toastr https www npmjs com package toas
  • Delphi:了解构造函数

    我正在寻找理解 virtual override overload 重新介绍 当应用于对象构造函数时 每次我随机添加关键字 直到编译器关闭 并且 在使用 Delphi 开发 12 年之后 我宁愿知道我在做什么 而不是随机尝试 给定一组假设的
  • 弹簧MVC。 POST 表单未绑定

    我有一些简单的 Man 类 其中包含构造函数 getter 和 setter public class Man Size min 3 max 20 message Username must be between 3 and 20 char
  • Symfony2 从 URL 获取路由名称

    好的 你可以通过以下方式获取当前路线名称app request attributes get route 但无法从 url 获取 就像是app request attributes get about 您可以使用Router为此类 服务 p
  • Discord.js 获取具有特定角色的所有成员

    我正在尝试让所有具有特定角色的成员加入 每当我运行该命令时 我只得到我自己和机器人 如果机器人具有该角色 但服务器中还有其他 4 个人具有相同的角色 但他们都没有出现 如果我获取所有成员 他们就会表现得很好 有谁知道为什么会发生这种情况 C
  • WPF 中的全局鼠标挂钩

    我需要获取鼠标在屏幕上的位置NOT在我的应用程序中 我用过全局鼠标和键盘钩子here http www codeproject com Articles 7294 Processing Global Mouse and Keyboard H
  • Julia DataFrames.jl - 使用 NA 过滤数据 (NAException)

    我不知道如何处理NA在 Julia DataFrames 中 例如 使用以下 DataFrame gt import DataFrames gt a DataFrames data 1 2 3 4 5 gt b DataFrames dat
  • JSP Web 应用程序中的国际化?

    在我当前的项目中 我们正在考虑逐步淘汰旧的表示层 并用更现代 更知名的东西取代它 由于各种原因 选择 JSP 作为技术 可能与 Apache Tiles 结合使用 我或许应该提到 如果这很重要的话 我们正在后面使用 Spring 国际化是一
  • SwiftUI ViewModel 发布的属性和绑定

    我的问题可能是误解的结果 但我无法弄清楚 所以这里是 使用 TextField 等组件或任何其他需要绑定作为输入的组件时 TextField title StringProtocol text Binding
  • Python 中的带宽限制

    哪些库可以让您控制网络请求 特别是 http 的下载速度 我没有在 urllib2 中看到任何内置内容 也没有在我打算使用的 Py Qt 中看到 Twisted 可以控制带宽吗 如果没有 如何控制 urllib2 或 Twisted 的读取
  • AngularJS序列化表单数据

    我希望在 angularjs 中序列化表单数据 以下是控制器代码 function SearchCtrl scope element http scope url php search php scope submit function v