javascript - 如何使用 onClick 写入文本文件？

Question

我创建了一个简单的 php/javascript/html 页面。

它的工作原理如下:

• 它从 SQL 查询获取信息；
• 它使用 for 显示表格上的所有信息；
• 每行有两个按钮。每个按钮都会调用一个函数，该函数会在文本文件中写入一条消息以及该特定行上的信息。

我的问题:每当我刷新页面时，所有内容都会写入文件中，而不是等待我单击按钮然后写入消息。

我已经尝试将函数调用置于 for 循环之外，但这并没有解决。我相信，由于它们位于循环内，每次刷新页面时，两个按钮都会“被单击”。

我还尝试将按钮类型更改为提交，但没有成功。

这是我正在使用的代码:

<?php   
for($i=0;$i<count($aux);$i++){
?>
 <tr>
 <td><?php echo $i+1; // Simple counter, to have everything in order ?></td>
 <td><?php echo $aux[$i]['NAME']; // Displays the name?></td>
 <td><?php echo $aux[$i]['INFO']; // Display some information?></td>

<script>

function First_Message(){
 <?php  // If the first button is pressed, then this function is called
 $contents .= "Message: ".trim($aux[$i]['NAME'])." message #1 ".date("H:i:s");
 $success = file_put_contents("file.txt", $contents);
 ?>
 }
</script>

<script>
function Second_Message(){
 <?php  If the second button is pressed, then this function is called
 $contents .= "Please,: ".trim($aux[$i]['NAME'])." message #2 ".date("H:i:s");
 $success = file_put_contents("file.txt", $contents);
 ?>
 }
</script>

<!-- Creates the first button -->

<td><input type="button" value="message_1" name = "balcao" onClick = "First_Message()" /></td>

<!-- Creates the second button -->

<td><input type="button" value="message_2" name = "balanca" onClick = 
"Second_Message()" /></td>

</tr>
<?php   
} // End Loop
?>

我希望输出只是在文本文件中写入一行消息，并且该消息是我根据单击这两个按钮中的任何一个按钮来决定的。

如果有人能告诉我我做错了什么或/并告诉我目前使用 onClick 所做的事情的替代方案(我认为这是问题所在)，我将非常感激。

如果您需要，请随时询问更多信息。

Answer 1

您不能以这种方式混合 javascript 和 php 函数。

我想到的第一个解决方案是一个简单的 ajax 查询。

什么是ajax？

AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

简单代码:

<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && isset($_POST['text'])):
    $output = '';
    $filename = 'file.txt';
    if (!file_exists($filename)):
        $myfile = fopen($filename, "w");
    endif;
    file_put_contents($filename, $_POST['text']);   
    $output = array("File content created");
    die(json_encode($output));
else:
?>

<?php
for ($x = 0; $x <= 10; $x++):
?>
    <button id="button" type="button" value="Clicked button <?php echo $x; ?>">A am button <?php echo $x; ?></button>
<?php
endfor;
?>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>     
<script>
$(document).on('click','#button',function(e) {
    var my_text = $(this).val();

    $.ajax({
        type: "POST",
        dataType:"json",
        url: window.location.href,
        data: "text=" + my_text,
        beforeSend: function (data) {
            alert('Sending');
        },
        success: function (data) 
        {
            alert('Success');

        },
        error: function (data) 
        {
            alert('Error');
        }
    });     
});
</script>
<?php endif; ?>