从 HTML 表单事件调用解析 javascript 函数答案

【问题标题】：Calling parse javascript function from HTML form event从 HTML 表单事件调用解析 javascript 函数
【发布时间】：2012-12-27 19:36:03
【问题描述】：

我一直在尝试从 html 表单提交中调用一个简单的 javascript 登录函数，但它似乎没有调用该方法。我已尝试将该方法移至外部 .js 类，但该功能仍然无法正常工作。 java 脚本函数位于名为 Login() 的标头中，它使用表单中的变量将它们传递到 Web 服务并登录。我也尝试从外部 homepage.js 脚本调用其他函数，但它们没有触发事件。如果登录成功，我的意图是推送到 index.html 页面。谢谢。

代码：

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.1.15.min.js"></script>     

    <script type="text/javascript">
    Parse.initialize("v9s5EdsZ4u9fSfTpr8SD0u3Xcb56nen1GWge47kV", "fjuiNrsJk3AubBY1zDfosLKDoPxzGgKlUxegxbtx");
function Login()
    {
      Parse.User.logIn(document.loginForm.uname, document.loginForm.pword, 
      {
        success: function(user) 
        {
          window.location="/index.html";
        },
        error: function(user, error) 
        {
          // The login failed. Check error to see why.
        }
      });
    }
  </script>

    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; 
        padding-bottom: 140px;
      }
      .container {
        width: 300px;
      }

      /* The white background content wrapper */
      .container > .content 
      {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; 
        -webkit-border-radius: 10px 10px 10px 10px;
           -moz-border-radius: 10px 10px 10px 10px;
                border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

    .login-form {
    margin-left: 65px;
    }

    legend {
    margin-right: -50px;
    font-weight: bold;
      color: #404040;
    }

    </style>

  </head>
  <body>
    <div id="topBar">
      <button onclick="WarningSigns()" class="btn btn-danger" type="button">Warning signs</button>
    </div>

    <div id="content">
      <div id="titleContent">
        <h1>Bronchiectasis</h1>
        <p id="subTitle">Self-management action plan <p>
      </div>
    </div>
      <div class="container">
    <div class="content">
      <div class="row">
        <div class="login-form">
          <h2>Login</h2>
          <form name="loginForm" action="javascript:Login()">
            <fieldset>
              <div class="clearfix">
                <input name="uname" type="text" placeholder="Username">
              </div>
              <div class="clearfix">
                <input name="pword" type="password" placeholder="Password">
              </div>
              <button class="btn primary" type="submit">Sign in</button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div> <!-- /container -->



  </body>

【问题讨论】：

如果我将您的代码粘贴到 Fiddle (jsfiddle.net/JYsZe) 并单击登录，我添加的警报显示（至少在 Chrome 中）。所以我一定是误解了你的问题。如果是这样，请点击编辑链接澄清您的问题。
问题似乎是我的解析调用包装在一个函数 Login() 中，因为它在没有它的情况下调用，我不明白
您是否尝试调用此 API？ parse.com/docs/js/symbols/Parse.User.html#.logIn
你应该删除你的 Parse 键

标签： javascript html dbaas

【解决方案1】：

logIn function from the Parse API 的用户名和密码参数需要字符串值。您正在传递 HTML 元素。

将调用改为：

  Parse.User.logIn(document.loginForm.uname.value, document.loginForm.pword.value, 
  {
    success: function(user) 
    {
      window.location="/index.html";
    },
    error: function(user, error) 
    {
      alert('error '+error);
      // The login failed. Check error to see why.
    }
  });

你应该走得更远。

更新小提琴：http://jsfiddle.net/JYsZe/1/

【讨论】：