我正在使用Xampp，刚刚开始学习Web开发。基本上，我正在尝试学习如何使用jquery提交表单而无需更改页面，请记住，我知道它没有验证，这是为了我的学习实践。
所以myy问题是当我单击提交时，它导致我的网页冻结和崩溃，我尝试学习使用的代码是否做错了什么？
注册.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();
});
}
提交.php
<?php
echo $_POST['username'] ."<br />";
echo $_POST['email'] ."<br />";
echo $_POST['pass'] ."<br />";
echo "==============================<br />";
echo "All Data Submitted Successfully!";
?>
谢谢
改用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();
});
以下代码在 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 版本问题。