Question

自从我10岁以来，我还没有做过前端HTML，这是拖放首页的东西。使用静态页面。结果我真的生锈了。

我需要做的是为我在NodeJS中编写的rest API组建一个Web客户端。我的问题是，您是如何将表单（例如登录表单）中的请求发送到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>

Answer 1

我建议大量阅读。不过，为了让您开始使用一个非常基本的示例，您将找到一个页面，其中包含下面的示例表单，可以满足您的需求。您只需要将字符串your URL here替换为您希望处理的实际URL。

serializeObject()函数来自此处：Convert form data to JavaScript object with jQuery

<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属性在很多方面都很重要，因此我会通过将每个元素的name属性设置为与其id属性相同的值来修复您的html。 serializeObject函数依赖于具有名称的表单元素。

Answer 2

以下是使用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>

Answer 3

这可能会对你有所帮助。以下是下面的表格：如果您发现有动作和方法，如果您不知道这些是什么，请继续搜索。 Action是目标服务器文件，用于处理您发送的信息以及检索不更新的方法。

现有用户

用户名：

密码：

保持我已登录

这是处理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;    });

});

使用NODEJS后端从HTML表单发送JSON

3 个答案: