POST到PHP而不刷新页面？
Posted
技术标签:
【中文标题】POST到PHP而不刷新页面？【英文标题】：POST to PHP without page refresh? 【发布时间】：2016-08-11 15:01:00 【问题描述】：已更新 - 请帮忙！！！它不会离开页面，但不会再发布到 SQL 服务器
我已经关注了多个在线论坛帖子，试图找到这个问题的答案，但我一直得到同样的结果。我只想发帖而不刷新页面。我的代码如下，请告诉我哪里出错了。
以下是 AJAX 帖子部分（在文件中：edit_project_new.php）：
$(document).ready(function()
$("#proj_submit").click(function(event)
var pname=document.getElementById('pname').value;
var p_start_date=document.getElementById('p_start_date').value;
var con_start_date=document.getElementById('con_start_date').value;
var con_end_date=document.getElementById('con_end_date').value;
var p_end_date=document.getElementById('p_end_date').value;
var IDF_room_ready=document.getElementById('IDF_room_ready').value;
var AV_install_date=document.getElementById('AV_install_date').value;
var Occupancy_date=document.getElementById('Occupancy_date').value;
var PID=document.getElementById('PID').value;
event.preventDefault();
$.ajax(
type:"POST",
url: "edit_project_new.php?action=update_project",
data:
name1: PID, name8: p_start_date, name9: con_start_date,
name10: con_end_date, name11: p_end_date,
name12: IDF_room_ready,
name13: AV_install_date, name14: Occupancy_date ,
success: function()
alert("Updated");
);
);
);
下面是 html 表格和表单（在文件：functions_new.php 中）：
<form method="post" action="#">
<input type="hidden" id="PID" name="PID" value="">
...
<input type="button" id="proj_submit" class="ui blue submit button right floated" value="Update">
</form></div>
以下是 SQL 查询部分（在文件：functions_new.php 中）：
if ((isset($_GET['action'])) AND ($_GET['action'] == "update_project"))
$pname= $_POST['pname'];
$PID=$_POST['PID'];
$p_start_date=date('Y/m/d', strtotime($_POST['p_start_date']));
$con_start_date=date('Y/m/d', strtotime($_POST['con_start_date']));
$con_end_date=date('Y/m/d', strtotime($_POST['con_end_date']));
$p_end_date=date('Y/m/d', strtotime($_POST['p_end_date']));
$IDF_room_ready=date('Y/m/d', strtotime($_POST['IDF_room_ready']));
$AV_install_date=date('Y/m/d', strtotime($_POST['AV_install_date']));
$Occupancy_date=date('Y/m/d', strtotime($_POST['Occupancy_date']));
$sql2 = str_replace("'1969/12/31'","NULL","UPDATE Project SET p_start_date='$p_start_date', con_start_date='$con_start_date',con_end_date='$con_end_date',p_end_date='$p_end_date',AV_install_date='$AV_install_date',IDF_room_ready='$IDF_room_ready',Occupancy_date='$Occupancy_date' WHERE PID='$PID'");
if (mysql_query($sql2))
echo "Project record updated.";
else
echo "Error: " . $sql2 . "<br>" . mysql_error($link);
每当我发布时，它都会加载一个新页面，其中只有回显“项目记录已更新”。我觉得我很接近，但我做错了什么，所以如果有人能引导我朝着正确的方向前进，我将不胜感激。
【问题讨论】：
在点击函数开始时尝试 event.preventDefault 您并没有阻止原始表单提交继续进行，因此您开始执行 ajax 请求，同时也执行正常的表单提交。 我该如何解决这个问题？ 首先，您将事件附加到 id 为“提交”的元素，但没有这样的元素。 你好 Progrock，我把它改成了 proj_submit 【参考方案1】：将输入 type=submit 更改为 type=button 以避免按钮的提交行为。
<input type="button" id="proj_submit" class="ui blue submit button right floated" value="Update">
上面按钮的 ID 是 proj_submit，而这里的 $("#submit").click(function() 您正在使用另一个按钮 id=submit，它可能具有 type=submit 属性
【讨论】：
感谢您的回复。我添加了这个更改，但仍然有同样的问题。 除非您明确尝试，否则无法提交带有输入类型按钮的表单 那么我应该把按钮改回提交吗？ 没有。将$("#submit").click(function()更改为$("#proj_submit").click(function()或将提交按钮的输入类型更改为button
我做了这些改变。还是同样的问题。【参考方案2】：
event.preventDefault()默认不会触发点击事件的动作。
可以删除您的表单操作标记并将action=update_project 移动到jQuery.ajax()。
JavaScript：
$('#submit').click(function(event)
event.preventDefault();
// your javasacript code
$.ajax(
type: 'POST',
url: 'functions_new.php',
data:
name1: PID,
name8: p_start_date,
name9: con_start_date,
name10: con_end_date,
name11: p_end_date,
name12: IDF_room_ready,
name13: AV_install_date,
name14: Occupancy_date,
action: 'update_project'
,
success: function()
alert('Updated');
);
);
请注意，现在action 将是一个 POST 参数。
PHP：
if (isset($_POST['action']) && $_POST['action'] == 'update_project')
// your php code
【讨论】：
试着解释一下。 感谢您的回复。不幸的是，这仍然对我不起作用，我已经尝试过了。 也尝试了事件，仍然没有:( @MikeValentino 您的表单操作应如下所示：action="#"
好的，现在我们开始了。但是如何调用 SQL 请求呢？【参考方案3】：
你错过了动作参数吗？
$.ajax(
type:"POST",
url: "functions_new.php",
data:
name1: PID, name8: p_start_date, name9: con_start_date,
name10: con_end_date, name11: p_end_date,
name12: IDF_room_ready,
name13: AV_install_date, name14: Occupancy_date,
action: 'update_project'
,
success: function()
alert("Updated");
并更改 php 文件：
if ((isset($_POST['action'])) AND ($_POST['action'] == "update_project"))
使用event.preventDefault(); 是一种很好的做法
【讨论】：
我已经进行了这些更改。当我按下更新按钮时，它无处可去。表单中的操作应该是“#”吗？ 是的，让我向您展示我所做的更改。我觉得到处都是哈哈。 您将参数操作放在 url 中，更改我在答案中写的内容，因为它的代码不同；)【参考方案4】：您可以阻止默认或使用链接而不是提交按钮。
第一个解决方案：PreventDefault：
$( "#form-id" ).on( "submit", function( event )
event.preventDefault();
data = $( this ).serialize() ); //earn time with serialize()
//your ajax code
);
第二个解决方案：如果你像我一样不喜欢PreventDefault
<span onclick="submitForm();">Submit</span>
...
function submitForm()
//your code
【讨论】：
您好，感谢您的回复，但 preventDefault 并不能解决我的问题，我之前已将其添加到我的代码中。 如果您愿意，可以使用其他 html 标记（第二个解决方案）。我在回复中加上了“.serialize()”，因为我发现它非常有用【参考方案5】： $( "form" ).on( "submit", function(e)
e.preventDefault();
data = $(this).serialize();
$.ajax(
type:"POST",
url: "functions_new.php",
data:data,
success: function()
alert("Updated");
);
);
那么动作也可以添加为隐藏字段
<form method="post" action="#">
<input type="hidden" id="PID" name="PID" value="">
<input type="hidden" id="action" name="action" value="update_project">
...
<input type="button" id="proj_submit" class="ui blue submit button right floated" value="Update">
</form></div>
然后下一个function_new.php页面
if ((isset($_POST['action'])) AND ($_POST['action'] == "update_project"))
【讨论】：
除此之外，其他一切都和我上面贴的一样吗？以上是关于POST到PHP而不刷新页面？的主要内容，如果未能解决你的问题，请参考以下文章