JQuery - AJAX 对话框模式，无法按 Enter 键提交表单

Question

在我正在开发的网站上，当您点击登录时，会弹出一个 jquery 对话框模式，但您必须点击确定才能提交表单，您不能只按 Enter。我也需要它才能进入工作。似乎我所拥有的应该可以工作，但事实并非如此

我正在使用 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');在我打开它之后，它总是奇怪地返回错误。如果可以的话，请帮忙。

Answer 1

我强烈建议考虑其他人关于原始客户端 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。而是使用准备好的 sql 编写一个自定义的 php 文件来验证登录数据。在此解决方案中，如果不存在 javascript，登录表单会优雅地降级，因为它是可由浏览器发送的标准 html 表单。您还应该意识到，某些浏览器在没有进一步要求的情况下在 Enter 上发送表单（即触发提交处理程序），但由于它是特定于浏览器的，如果您的应用程序必须这样做，您不能依赖它。作为最后一项操作，您最终应该检查是否需要在“ResultOfLoginAttempt”方法中手动关闭对话框。

Answer 2

查看 Fire Fox 的 Tamper 插件：Tamper Data 10.1.0 在客户端生成 SQL 不好。你可以劫持http请求。

Answer 3

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

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

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