jQuery表单提交时崩溃

Question

jQuery表单提交时崩溃

phpjqueryhtml

3

我正在使用Xampp并开始学习Web开发。

基本上，我正在尝试学习如何使用jQuery提交表单而无需更改页面。请注意，我知道它没有验证，这是为了我的学习实践。

所以我的问题是，当我点击提交按钮时，它会导致我的网页冻结和崩溃，我在学习使用的代码中是否有错误？

register.php

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/submit.js"></script>
    </head>
    <body>
        <form id="myForm" method="post">
            Username:    <input name="username" id="username" type="text" /><br />
            Email:   <input name="email" id="email" type="text" /><br />
            Password:<input name="password" id="password" type="password" /><br /> 
            <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
        </form>
        ==============================
        <br />
        <div id="results"></div>
    </body>
</html>

js/submit.js

function SubmitFormData() {
    var username = $("#username").val();
    var email = $("#email").val();
    var pass = $("#password").val();
    $.post("submit.php", { 
        username: username, 
        email: email, 
        pass: pass
    }, function(data) {
        $('#results').html(data);
        $('#myForm')[0].reset();
    });
}

submit.php

<?php
  echo $_POST['username'] ."<br />";
  echo $_POST['email'] ."<br />";
  echo $_POST['pass'] ."<br />";
  echo "==============================<br />";
  echo "All Data Submitted Successfully!";
?>

谢谢

- Jake Groves

在检查元素时，控制台中是否有错误？ - Dirk Jan

@djl 没有错误，但当我提交时整个页面会冻结，然后在10-15秒后显示“噫，Google Chrome已崩溃”或其他内容。 - Jake Groves

我认为你的 $_POST["name"] 是不正确的。你的 JavaScript 代码应该是 $_POST["username"]。 - David Yue

$('#myForm')[0].reset() 是否有效？ - rrk

由Dinesh修复，感谢大家的时间和回复。 - Jake Groves

显示剩余7条评论

2个回答

1

以下代码在jquery-2.2.0.min.js中可用，但在1.11.1中会抛出RangeError。

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head>
<body>
  <form id="myForm" method="post">
     Username:    <input name="username" id="username" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Password:<input name="password" id="password" type="password" /><br /> 
    <input type="submit" id="submitFormData" value="Submit" />
   </form>
   ==============================
   <br />
   <div id="results">
   </div>
   <script>
        $("#myForm").on('submit', function(e) {
            e.preventDefault(); 
            var name = $("#username").val();
            var email = $("#email").val();
            var pass = $("#password").val(); 
            $.post("submit.php", {
                name: name, 
                email: email, 
                pass: pass
            }, function(data, status) { 
                $('#results').html(data);
                $('#myForm').trigger("reset");
            });
            return false;
        });
    </script>
</body>
</html>

问题的提出方式

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head>
<body>
  <form id="myForm" method="post">
     Username:    <input name="username" id="username" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Password:<input name="password" id="password" type="password" /><br /> 
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
   </form>
   ==============================
   <br />
   <div id="results">
   </div>
   <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        $.post("submit.php", { 
            name: username, 
            email: email, 
            pass: pass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
    </script>
</body>
</html>

这里只是更改了jQuery版本，我已经更改了。

上述两种方法都可以工作。可能是jQuery版本问题。

- Dinesh Patra

请查看此链接 https://bugs.jquery.com/ticket/12233。我在使用1.11.1版本时也遇到了同样的错误，但在2.x版本中没有出现错误。 - Dinesh Patra

@JoshGumpter Lance是正确的，因为你正在传递密码，所以我认为通过ajax提交不是一个好主意。另外，由于它在2.x jQuery版本中工作，并且2.x不支持IE < 9，所以也要注意这一点。尝试使用$.ajax而不是$.post，我认为它可能不会在jquery 1.11中引起问题。 - Dinesh Patra

@JoshGumpter - 试试我的解决方案。此外，如果我的解决方案有效，无需标记为已接受。只需要点个赞就可以了！ :) - CodeWalker

@DineshPatra 和 Lance，我发现了，把密码存储在数据库或其他地方是不安全的。好的做法是将密码进行md5加密，对吗？ - Jake Groves

@JoshGumpter - 不要使用“md5”或“sha1”，因为它们现在存在漏洞。使用“password-hash”。请访问此处 - http://php.net/manual/zh/function.password-hash.php - CodeWalker

显示剩余6条评论

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

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

- CodeWalker · Accepted Answer

使用var formData = $("#myform").serialize()代替！

$(document).ready(function() {

// process the form
$("#myform").submit(function(event) {

    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = $("#myform").serialize();


    // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'register.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'html', // what type of data do we expect back from the server
            encode      : true
        })
        // using the done promise callback
    .done(function(data) {
            console.log(data);

    });

});

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});