POST到PHP而不刷新页面？

Question

已更新 - 请帮忙！！！它不会离开页面，但不会再发布到 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);
    }
}

每当我发布时，它都会加载一个新页面，其中只有回显“项目记录已更新”。我觉得我很接近，但我做错了什么，所以如果有人能引导我朝着正确的方向前进，我将不胜感激。

Answer 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 属性

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

Answer 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(); 是一种很好的做法

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

Answer 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")) {
}