Php jquery表单在提交时崩溃_Php_Jquery_Html

Php jquery表单在提交时崩溃

php jquery html

Php jquery表单在提交时崩溃,php,jquery,html,Php,Jquery,Html,我正在使用Xampp，刚刚开始学习web开发。基本上，我正在尝试学习如何使用jquery提交表单，而不必更改页面，请记住，我知道它在中没有验证，这是为了我的学习实践所以我的问题是，当我点击“提交”时，它会导致我的网页冻结和崩溃，我尝试学习使用的代码是否有问题 register.php <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></sc

我正在使用Xampp，刚刚开始学习web开发。基本上，我正在尝试学习如何使用jquery提交表单，而不必更改页面，请记住，我知道它在中没有验证，这是为了我的学习实践

所以我的问题是，当我点击“提交”时，它会导致我的网页冻结和崩溃，我尝试学习使用的代码是否有问题

<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>

submit.php

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

谢谢

以下代码在jquery-2.2.0.min.js中运行，但在1.11.1中出现了错误

<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>


用户名：

电子邮件：

密码：

==============================


$（“#myForm”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var name=$（“#用户名”）.val（）；
var email=$（“#email”）.val（）；
var pass=$（“#密码”）.val（）；
$.post（“submit.php”{
姓名:姓名,，
电邮:电邮,，
通过：通过
}，功能（数据、状态）{
$（'#results'）.html（数据）；
$（'#myForm'）。触发器（“重置”）；
});
返回false；
});

问问题的方式

<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>


用户名：

电子邮件：

密码：

==============================


函数SubmitFormData（）{
var username=$（“#username”）.val（）；
var email=$（“#email”）.val（）；
var pass=$（“#密码”）.val（）；
$.post（“submit.php”，{
名称：用户名，
电邮:电邮,，
通过：通过
}，函数（数据）{
$（'#results'）.html（数据）；
$（'#myForm'）。触发器（'reset'）；
});
}

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

上述两种方法正在发挥作用。可能是jquery版本问题。

使用

var formData=$（“#myform”）。请改为序列化（）！



检查元素时控制台中有错误吗？@djl没有错误，提交时整个页面冻结，10-15秒后“aw snap google chrome已崩溃”或显示任何内容。我认为您的$\u POST[“name”]
不正确。你的javascript说它应该是$\u POST[“username”]
@CoconutsNeedwarm啊是的，我注意到很抱歉，我现在修复了这个问题，但仍然会出现崩溃D：你尝试过其他浏览器吗？请检查这个。我在1.11.1中也遇到了同样的错误，但在2.x中没有遇到错误。@dinespatra这太好了，非常感谢：）最后一个问题，如果你不介意的话。。。这是一种有效的提交表单的方式吗？我选择了答案：）@JoshGumpter-这不是一种有效的方式，因为您的密码将以明文形式显示。@JoshGumpter Lance是正确的，因为您正在传递密码，根据我的说法，通过ajax提交不是一个好主意，同样在2.x jquery版本中也是如此，而且2.x不支持IE<9，所以也要注意这一点。使用$.ajax代替$.post，我认为它可能不会在jQuery1中引起问题。11@JoshGumpter-试试我的解决办法。此外，如果我的解决方案有效，则无需将其标记为已接受。只要投赞成票就行了！：）为什么它会返回empty
或null
？如果HTML
中密码字段的type
设置为type=password
，它将返回empty
或null
。不，情况并非如此。我可以获取$（“#password”）.val（）的值
@Mr.Engineer-因为您的密码字段被标记为type=text
否我知道如何在HTML中创建password字段。谢谢
<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>

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