使用html表单运行javascript代码提交

Question

嘿，我正在使用一个用于将人们登录到我的网站的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>

Answer 1

您需要从处理程序返回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;
     });
});

请注意，我正在使用帖子来确保网址（包括用户名和密码）不会在网络日志中公开。我还假设包含表单的页面是通过https加载的，因此帖子也会受到保护。

Answer 2

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

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

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});

Answer 3

如果您正在处理表单提交，您应该选择.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;
    });
});

Answer 4

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

< 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. 停止重新加载和重置显示页面