0

嘿，我正在使用用于将人们登录到我的网站的 html 表单，我正在构建它，因此它使用 AJAX (jQuery)，但我遇到了一些问题。

这是JavaScript：

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

这是html表单：

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

问题是，当我提交表单时，它会运行代码，然后又恢复到以前的状态，这听起来可能很奇怪，但我可以说，因为我可以看到它改变了 div 大小，然后在恢复到原始大小后立即.

有任何想法吗？

编辑：例如，如果我使用以下链接运行代码，那么它可以正常工作。

<a href="#" name="loginUser">Clicky</a>
4

4 回答 4

4

您需要从您的处理程序返回 false，以便在执行 AJAX 调用后它不会执行实际的表单发布。

这就是我要做的。

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

请注意，我使用帖子来确保 URL（包括用户名和密码）不会最终暴露在 Web 日志中。我还假设包含表单的页面是通过 https 加载的，因此帖子也将受到保护。

于 2009-10-21T23:37:25.373 回答
0

我很确定 tvanfosson 走在正确的道路上。尝试将 return false 向上移动到 click 函数或尝试取消事件。

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});
于 2009-10-21T23:50:57.423 回答
0

首先，您是否确认您的 .php 文件正在返回内容而不是错误？如果您正在插入内容（使用$load），则不应在 div 上触发 CSS 命令，直到您的预期内容（来自加载）成功返回，例如使用回调。另外，我建议使用.submit()表单特定函数，直接引用表单标签和/或 id 来加快速度（不要让 jquery 搜索 DOM 中的很多东西）。

< style >

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];}

.loadSuccess{ width:600px; height:200px;}

< / style >

function validateLoginDetails() {
  $('#formLogin').submit(function() {
    // using load(url,{data:toPOST},callback(if successful));

    $("#interfaceScreen").load("modules/web/loginForm.php?",
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)},
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load

  });// end submit

  return false;
}

这可能会更有效且不那么突兀，但希望让它可识别。其他人是对的...如果您的 Div 恢复到其原始大小...这是因为允许重新加载页面...在这种情况下，您的初始 DIV 宽度/高度由浏览器应用...因为您的备用宽度/高度仅由 jquery onsubmit 应用。

回顾一下：

  1. 将提交事件直接分配给表单
  2. 使用$load内置功能传递值对是对象{name:val}
  3. 将 CSS 移动到不显眼的状态与隐藏在代码中
  4. 如果成功则触发 CSS
  5. 停止页面重新加载和重置显示
于 2009-10-22T00:58:32.633 回答
0

如果您正在处理表单提交，那么您真的应该选择 .form() 事件处理程序，而不是 .click() 事件处理程序。对于前者，如果表单是通过任何其他方法提交的，您的检查仍将运行，而 click 取决于触发操作的单个元素。您还需要在此事件上返回 false 或 preventDefault()，这样您的函数才能正确触发。

另一件事（根据您提供的代码示例，这可能是微不足道/不重要的）是您将该事件处理程序绑定在一个必须调用的函数中 - 为什么不将它加载到准备好的文档中，就像这样（见下文）？

我会像这样修改你的代码，个人：

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});
于 2009-10-22T04:22:08.047 回答