Javascript 提交PHP时不刷新页面
我想实现的是，当我点击提交按钮时，它不会刷新页面。 “我的提交”按钮仅在提交时调用代码集。 但是当它被提交时，它会刷新页面，并且我的变量会丢失它的值 我知道这可以通过java脚本或ajax实现，但这是我还不知道的地方。我们需要开始学习它。 我曾尝试在JavaScript中使用其他一些建议，但对我来说不起作用，因为JavaScript代码是为大多数高级表单而构建的，而不仅仅是一个提交按钮 我的按钮：Javascript 提交PHP时不刷新页面,javascript,php,ajax,Javascript,Php,Ajax,我想实现的是，当我点击提交按钮时，它不会刷新页面。 “我的提交”按钮仅在提交时调用代码集。 但是当它被提交时，它会刷新页面，并且我的变量会丢失它的值 我知道这可以通过java脚本或ajax实现，但这是我还不知道的地方。我们需要开始学习它。 我曾尝试在JavaScript中使用其他一些建议，但对我来说不起作用，因为JavaScript代码是为大多数高级表单而构建的，而不仅仅是一个提交按钮 我的按钮： <form action='{$_SERVER['PHP_SELF']}' method
<form action='{$_SERVER['PHP_SELF']}' method='post'>
<input type='submit' class='submit' name='confirm_points' value='Confirm Points' />
</form>";
感谢您的帮助这里有一个简单的例子：
<?php
if (isset($_POST['points'])) {
echo "I'm AJAX and I have " . $_POST['points'];
exit();
}
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();
$.ajax({
type: $(this).attr('method'),
data: $('form').serialize(),
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>
</head>
<body>
<form method="POST">
<input type="text" name="points" placeholder="Some data" value="25 points"/>
<input type='submit' class='submit' name='confirm_points' value='Confirm Points' />
</form>
<div id="result"></div>
</body>
</html>
$（文档）.ready（函数（）{
$（'form'）。提交（函数（事件）{
event.preventDefault（）；
$.ajax({
类型：$（this.attr（'method'），
数据：$（'form'）。序列化（），
成功：功能（数据）{
$（'#result'）.html（数据）；
}
});
});
});
<html>
<head></head>
<body>
<form id="my-form">
<input type="text" name="username" /> <br/>
<input type="submit" value="Save" />
</form>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('#my-form').submit(function (e) {
var $data = $(this).serialize();
var $url = 'path_to_processing_script';
$.post($url, $data, function ($response, $status ) {
if ( $status == 'success' ) {
alert($response);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
$（函数（）{
$（“#我的表格”）。提交（函数（e）{
var$data=$（this.serialize（）；
var$url='path_to_processing_script'；
$.post（$url、$data、函数（$response、$status）{
如果（$status==“success”）{
警报（$响应）；
}
});
e、 预防默认值（）；
});
});
<?php
var_dump($_POST);
?>
首先要停止刷新，请将表单标题更改为：
<form action='{$_SERVER['PHP_SELF']}' method='post' onsubmit="javascript:return false;" id="myform">
<script src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
var elem1=$("#elem1").val(); //get values of inputs for validation
if(elem1.length<5){alert("Length too short!");}//Sample Validation
else{
$.ajax({
url:"verify.php",//link to your submission page
type:"post", //change to your needs
data:{"elem1":elem1}, //add all variable
success:function(response){alert(response);} //Manage Response
});
});
});
</script>
$（文档）.ready（函数（）{
$（“#myform”）.submit（函数（）{
var elem1=$（“#elem1”）.val（）；//获取用于验证的输入值
如果（elem1.lengthMarcel，你知道如何使用jQuery吗？你必须使用AJAX来实现你想要的东西。正如@Makville所提到的，jQuery很容易实现。@Makville-jQuery只是在我正在学习的时候才实现。从零开始做一些事情。谢谢Makville…它很有效…我也尝试过switchers代码，它也很有效…太好了！很高兴能提供帮助。干杯
<script src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
var elem1=$("#elem1").val(); //get values of inputs for validation
if(elem1.length<5){alert("Length too short!");}//Sample Validation
else{
$.ajax({
url:"verify.php",//link to your submission page
type:"post", //change to your needs
data:{"elem1":elem1}, //add all variable
success:function(response){alert(response);} //Manage Response
});
});
});
</script>