JQuery - AJAX对话框模态，无法使用回车键提交表单。

Question

JQuery - AJAX对话框模态，无法使用回车键提交表单。

4

我正在工作的一个网站上，当您单击“登录”时，会弹出一个jQuery对话框模态，但必须单击“确定”才能提交表单，不能仅按下回车键。我需要它也能够使用回车键。看起来我已经做好了应该做的事情，但不起作用。

我正在使用jquery-1.3.2.js。我还有一个php文件，其中包含以下代码：

  <tr valign="top" align="right" style="height:40px"><td >

    <div id="signin">

      <table style="margin-top:4px;margin-right:4px;border-style:solid;border-width:1px">

        <tr><td style="width:165px;">  

            <div><center>

            <a title="Sign In" onclick="LoginDialogOpen()" href="javascript:void();">Sign In</a><b>&nbsp;&nbsp; | &nbsp;&nbsp;</b>

            <a title="Create Account" href="CreateAccount.html">Create Account</a>

            </center></div>  

        </td></tr>

      </table>

    </div>

  </td></tr>

    <div id="Signin_Dialog" >

    <div id="bg">

    <label><span>Email:</span></label>

    <input type="text" name="email" id="email" class="dialog-input-text"/>

    <br>



    <label><span>Password:</span></label>

    <input type="password" name="password" id="password" class="dialog-input-text"/>

    <br>

    <br>

    <center><b><label id="login_error" style="color:red"><span>&nbsp;</span></label></center></b>



  </div>

</div>



<script>

    $('#login_dialog').dialog({

        autoOpen: false,

        width: 310,

    overlay: { opacity: 0.5, background: "black" },

  modal: true,

        buttons: {

            "Ok": function() { 

      $("body").addClass("curWait");                

      sql = "select client_id from users where email = '" + $("#email")[0].value + "' and login_password='" + $("#password")[0].value + "'";

      $.get('BongoData.php', { task:"SQLResultToJSON", sql: sql}, ResultOfLoginAttempt, "json");

            }, 

            "Cancel": function() { 

                $(this).dialog("close"); 

            } 

        }

    });


</script>`

我有一个JavaScript文件，其中包含以下函数：

function LoginDialogOpen(){

  $('#login_dialog').dialog('open');
  $('#login_dialog').keypress(function(e) {
    if (e.which == 13) {
      $("body").addClass("curWait");                

      sql = "select client_id from users where email = '" + $("#email")[0].value + "' and login_password='" + $("#password")[0].value + "'";

      $.get('BongoData.php', { task:"SQLResultToJSON", sql: sql}, ResultOfLoginAttempt, "json");
    }
});

}

：这是一个代码段中的闭合大括号。

“那是我拥有的代码，我不明白为什么它不起作用。我也试过在打开它后立即尝试 $('#login_dialog').dialog('isOpen');，但奇怪的是它总是返回false。如果可以，请帮忙解决问题。”

- Andrew Hanlon

11

虽然这并不是一种解决方法，但我强烈建议你不要在Javascript中创建SQL查询。我可以编辑它以获取任何我想要的内容并读取你的整个数据库。 - Ian Elliott

我不确定为什么你的按键处理程序没有工作。但是，我建议您将您的登录代码（$("body").addClass("curWait");等）重构为一个函数。 - Matthew Flaschen

1

哇，我无语了...从哪里开始呢？JavaScript中的SQL，div标签中的center标签，嵌套在div标签和table标签中，侵入式JavaScript，内嵌样式...我只希望这是遗留代码... - Darko

3个回答

0

我认为你的意思是 if (e.keyCode == 13) { 而不是 if (e.which == 13) {。

此外，Ian Elliot 是对的。您永远不应该将实际的 SQL 作为 JavaScript 或表单的任何部分。您可以提交值到服务器，这些值最终将被插入到您的 SQL 中*，但从不提交完整的 SQL。

*一旦这些值经过适当的验证、清理和可选地通过另一层抽象（考虑 MVC）。

- Keith Bentrup

1

关于 e.keyCode 和 e.which，jQuery 文档表示 .which 属性已被标准化，而 .keyCode 属性的名称可能因浏览器而异，因此最好依赖于 .which 属性。 - jek

0

看看火狐浏览器的篡改插件：Tamper Data 10.1.0。在客户端生成 SQL 是不好的，因为你可以劫持 HTTP 请求。

- Richard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jek · Accepted Answer

我建议您认真考虑他人关于客户端原始SQL的所有注意事项！

关于您实际提出的问题，我建议如下：在登录对话框中放置一个表单，如下所示：

<div id="login_dialog">
  <form method="get" action="BongoData.php">
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="submit" />
  </form>
</div>

然后在初始化对话框的脚本部分，编写类似以下内容的代码：

$('#login_dialog').dialog({
  autoOpen: false,
  width: 310,
  overlay: { opacity: 0.5, background: "black" },
  modal: true,
  buttons: {
    "Ok":     function() { $('#login_dialog form').submit(); },
    "Cancel": function() { $(this).dialog("close"); } 
  }
});

// hide the original submit button if javascript is active
$('#login_dialog form input[type=submit]').hide();
// register a submit handler to submit the form asynchronously
$('#login_dialog form').submit(function () {
  // calling serialize() on a form transforms form inputs to a string suitable for $.get and $.post
  $.get($(this).attr('action'), $(this).serialize(), ResultOfLoginAttempt, "json");
  // prevent that the browser submits the form.
  return false;
});
// and register a key listener to submit the form if the user presses enter on the password input field
$('#login_dialog form input[type=password]').onKeyDown(function (e) {
  if (e.which == 13) {
    // just trigger the submit handler
    $('#login_dialog form).submit();
  }
});

通过这些准备工作，您可以大大简化JavaScript：

function LoginDialogOpen(){
  $('#login_dialog').dialog('open');
}

一些附加说明：不要在您的javascript中使用SQL。相反，编写一个自定义的php文件，使用预处理的sql来验证登录数据。在这个解决方案中，如果没有javascript存在，登录表单会优雅地降级，因为它是一个标准的html表单，可以由浏览器发送。您还应该意识到一点，即某些浏览器会在按Enter键时发送表单（即触发提交处理程序），但由于这是特定于浏览器的，因此如果这对您的应用程序必不可少，您不能依赖此功能。作为最后一个步骤，您最终应该检查是否需要在“ResultOfLoginAttempt”方法中手动关闭对话框。