php怎么不刷新页面更新数据.

Posted 2023-04-18

要做一个股票的实时查看系统 需要实时更新 折线图

用ajax实现，或者iframe实现，你可以在网上查询一下这方面的资料！ 参考技术A 用ajax 参考技术B 用jquery就可以了。

POST到PHP而不刷新页面？

【中文标题】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")) 

【讨论】：

除此之外，其他一切都和我上面贴的一样吗？