使用NODEJS后端从HTML表单发送JSON
我从10岁开始就没有做过前端HTML，那是拖放FrontPage的东西。 与静态页面。 结果我真的生锈了。
我需要做的是把一个Web客户端放在一起，用于在NodeJS中编写的其他API。 我的问题是，你是如何发送一个请求从一个窗体（比如说一个login表单）到POST请求的主体是电子邮件/密码的JSON的服务器？
HTML表单：
<form id="loginForm" action="" method="" class="form-horizontal"> <fieldset> <legend>Log in</legend> <div class="control-group"> <label class="control-label" for="email">Email</label> <div class="controls"> <input type="text" class="input-xlarge" id="email"> </div> </div> <div class="control-group"> <label class="control-label" for="password">Password</label> <div class="controls"> <input type="password" class="input-xlarge" id="password"> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> 我build议大量阅读。 为了让你开始一个非常基本的例子，虽然，你会find一个页面，下面有一个样例表格，它是你所需要的。 你只需要把your URL here的stringreplace成你期待的处理的URL。
serializeObject()函数从这里获取： 使用jQuery将表单数据转换为JavaScript对象
<html> <body> <form id="loginForm" action="" method=""> Username: <input type="text" name="username" id="username" /> <br /> Password: <input type="password" name="password" id="password" /> <br /> <input type="submit" /> </form> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function () { $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $("#loginForm").bind("submit", function(evt) { console.log(JSON.stringify($("#loginForm").serializeObject())); $.ajax({ url: "your URL here", type: "POST", contentType: "application/json", data: JSON.stringify($("#loginForm").serializeObject()), success: function (data, textStatus, jqXHR) { // do something with your data here. }, error: function (jqXHR, textStatus, errorThrown) { // likewise do something with your error here. } }); return false; }); }); </script> </body> </html>
您的表单的问题是input元素没有name属性。 name属性在许多方面都是必不可less的，所以我会通过将每个元素的name属性设置为与id属性相同的值来修复你的html。 serializeObject函数依赖于具有名称的表单元素。
这里是一个使用jQuery的例子：
<form name="myform" action="#" method="POST"> Username: <input type="text" id="user" name="username"/><br/> Password: <input type="password" id="pass" name="password"/> <input type="submit" id="login" value="Login"/> </form> <script type="text/javascript"> var user=$('#user').val(), pass=$('#pass').val(); $('login').bind('click', function() { $.ajax('/my/url', { type: 'POST', contentType: 'text/json', data: JSON.stringify({username:user, password:pass}), complete: function() { /* Do something with the response. */ } }); return false; // Prevent form submit. }); </script>
这可能会帮助你。 这里是下面的表格：如果你不知道这些是什么，如果你注意到有行动和方法，只要继续search它。 操作是处理您发送的信息的目标服务器文件，而获取的方法是检索不更新。
现有用户
用户名：
密码：
让我保持登陆状态
这里是处理ajax调用的jquery部分：
$.ajax({ type: "GET", url: action, data: form_data, success: function(response) { if($.trim(response) == 'success') window.location.replace("profile.php"); else $("#result").html(response); } }); return false; }); });