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而不刷新页面?的主要内容,如果未能解决你的问题,请参考以下文章

使用ajax将表单提交给php而不刷新页面

在浏览器中重新加载/刷新页面而不重新提交表单?

重置密码 POST 刷新页面而不发布

自动刷新表而不刷新页面 PHP MySQL

PHP刷新表格而不刷新整个页面

在php中反映列表而不刷新页面