让PHP通过AJAX更改文本文件而不刷新页面

时间:2015-05-09 12:28:24

标签: javascript php jquery ajax forms

我正在为12年级IT开发一个简单的网站,它需要做的是出售咖啡(或至少给出外观,我们实际上并没有出售任何东西)。提交订单时,它们会转换为PHP变量,然后作为简要订单摘要放置; 订单的摘要发布到文本文件中。到目前为止一切都很好。

当我尝试清除文本文件/“确认订单”(将文件内容发布到日志然后清除文件本身)时出现问题。使用纯PHP(写入提交按钮,检查isset(),然后使用file_get_contents())完美地工作,但强制页面请求也重新提交最近的订单。使用混合的AJAX / PHP可以让我为清除/确认的订单创建漂亮的小通知,假设刷新特定页面区域并避免重新提交,但由于某些原因,仍然会发生完全刷新和重新提交。为什么呢?

PHP:

<?php

$txtManip = $_REQUEST['txtFunk'];

if($txtManip == "clear"){
    file_put_contents('orders.txt', '');
}

if($txtManip == "confirm"){
    $n = 1;
    $custNum = $n++;

    $confirmedOrders = "Customer " . $custNum . " " . "ordered " . file_get_contents('orders.txt') . "\n";
    file_put_contents('log.txt', $confirmedOrders, FILE_APPEND | LOCK_EX);
    file_put_contents('orders.txt', '');
}
?>

使用Javascript:

clearButton.addEventListener('click', notifyClear);
confirmButton.addEventListener('click', notifyConfirm);

function orderCleared(){
    orders.style.display = "block";
    orderScrollText.innerHTML = "Order another coffee";
    orderShifter.removeEventListener('click', orderDisp);
    orderShifter.addEventListener('click', orderHide);
}

function notifyClear(){     
    ajaxTime.onreadystatechange = function(){
        if (ajaxTime.readyState == 4 && ajaxTime.status == 200){
            notification.style.display = "flex";

            setTimeout(function(){
                    notifyBox.style.display = "none";
            }, 4000);

            notifyText.innerHTML = "Cleared!";
        }
    }
    ajaxTime.open("POST", "notepadControl.php", true);
    ajaxTime.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxTime.send("txtFunk=clear");

    /*$.ajax({
        url: "notepadControl.php",
        data: clear,
        type: "post",
        success: function(output){
            alert (output);
        }
    })*/

    setTimeout(function(){
        orderCleared();
        window.location = "http://heptane.smgx.co#subbedOrders";
        location.reload();
    }, 5000);
}

function notifyConfirm(){   
    ajaxTime.onreadystatechange = function(){
        if (ajaxTime.readyState == 4 && ajaxTime.status == 200){
            notification.style.display = "flex";

            setTimeout(function(){
                    notifyBox.style.display = "none";
            }, 4000);

            notifyText.innerHTML = "Confirmed Orders";
        }
    }
    ajaxTime.open("POST", "notepadControl.php", true);
    ajaxTime.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxTime.send("txtFunk=confirm");

    setTimeout(function(){
        orderDisp();
        window.location = "http://heptane.smgx.co#subbedOrders";
    }, 5000);
}

HTML:

<div id="showOrders">
    <p class="whiteText" id="orderScroller">See Orders</p>
</div>

<div id="subbedOrders">
    <iframe id="orderList" src="orders.txt" ></iframe>
    <form method="post">
        <input type="button" id="clearOrders" method="post" name="clear" value="Clear Orders" />
        <input type="button" id="orderConfirm" method="post" name="confirm" value="Confirm Orders" />
    </form>

    <div id="notifyBox">
        <p id="notifyText" class="whiteText"></p>
    </div>
</div>

<script src="milk.js"></script>

换句话说,我想要的东西会清空我的文本文件而不重新提交任何数据或刷新整个页面:)。只要最终解决方案有效,JQuery和你的宠物库都很好。显然我正在使用AJAX,因为它应该是唯一的方法。更安全的东西是首选,所以任何保持服务器端工作的东西都会让我开心。提前谢谢!

0 个答案:

没有答案