Question

我正在使用Xampp，刚刚开始学习web dev。基本上我正在尝试学习如何使用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!";
?>

感谢

Answer 1

使用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();
});

Answer 2

以下代码在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版本问题。

jquery表单崩溃提交

2 个答案: