Question

这是一个收集名称和注释的简单表单，将它们保存在一个平面文件中，并生成一个html表来显示数据。

我想使用jquery，以便在不重新加载页面的情况下显示更新。

我看到的所有解释都是过头了。一个不成熟的人应该尝试这个吗？如果必须的话，我可以继续重新加载页面，但我不愿意。

任何建议表示赞赏。

这是我现在使用的页面，名为'messages.dat'的文件：

<?php
if (isset($_POST['submit']) && $_POST['mssg'] > "") {
$mssg = $_POST['mssg'];
$del = "\t";
    $lines[0] = $_POST['username'];
$lines[1] = $_POST['mssg'];
$lines[1] = nl2br($lines[1]);
$lines[1] = str_replace("\r", "", $lines[1]);
$lines[1] = str_replace("\n", "", $lines[1]);
$file = fopen("messages.dat", "a");
$lines = implode($del, $lines) . "\r\n";
fwrite($file, $lines);
fclose($file);
}


?>
<html>
<head>

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<title>Blech</title>

</head>

<body>

<form name = "my_form"
id = "my_form" method  = "post" action="<?phpecho$_SERVER['PHP_SELF'];?>">
<label>Enter your name</label>
<br>
<input type = "text" name = "username">
<br>
<label>Enter mssg here</label>
<br>
<textarea name = "mssg" id = "mssg" cols = "40" rows = "4"></textarea>
<br>
<button name = "submit" id = "submit" value="submit" />submit</button>
</form>

<div id = "put_here">  <!--   THIS DIV DISPLAYS THE UPDATED CONTENT    -->
<?php
$board_content = "";
$row = 0;
if (($handle = fopen("messages.dat", "r")) !== FALSE) {

$board_content = '<table border="1"><tr><th>Name</th><th>Message</th></tr>';

while (($lines = fgetcsv($handle, 100, "\t")) !== FALSE) {
    $num = count($lines);

$board_content .= '<tr>';

for ($c=0; $c < $num; $c++) {
           if(empty($lines[$c])) {
           $value = "&nbsp;";
        }else{
           $value = $lines[$c];
        }
**strong text**$board_content .= '<td>'.$value.'</td>';
}
$board_content .= '</tr>';
$row++;
}
fclose($handle);
echo $board_content . '</table><br>';
}

?>
</div>
<script>
//  ALWAYS GOTTA HAVE THIS CONTAINER:   $(document).ready(function(){
//   ENDS THE 'READY' CONTAINER:                            });
</script>

</body>
</html>

Answer 1

如果必须使用文本，我会以json格式存储设置。

这样的事情可以解决问题。

<?
    $file = 'messages.json';
    touch($file);       //create file if not exist
    $messages = json_decode(file_get_contents($file),true);
    if(empty($messages)){
        $messages = array();
    }

    if(isset($_POST['username'])&&isset($_POST['mssg'])) {  //save settings
        $messages[] = $_POST; //remember to sanitize
        file_put_contents($file,json_encode($messages));
        exit;
    }elseif(isset($_POST['read'])&&$_POST['read']=='messages'){
        echo json_encode($messages);
        exit;
    }

?>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
<body>
    <form id="my_form" method="post" action="">
        <label>Enter your name</label>
        <br>
        <input type="text" name="username" id="username">
        <br>
        <label>Enter mssg here</label>
        <br>
        <textarea name="mssg" id="mssg" cols="40" rows="4"></textarea>
        <br>
        <button name="submit" id="submit" value="submit" />submit</button>
    </form>

    <div id="put_here">
        <table border="1" id="put_here_table">
        <!--messages will be added here-->
        </table>
    </div>

    <script>
        $("#my_form").submit(function(e){  //handle the form submission
            e.preventDefault();
            var data = $(this).serialize();
            $.ajax({
                url: "./thisfile.php",
                method: "POST",
                data: data,
                success: function(response){
                    $("#put_here_table").append('<tr><td>'+$("#username").val()+'</td><td>'+$("#mssg").val()+'</td></tr>');
                    $("#mssg").val("");//clear the text box
                }
            });
        });
        $.ajax({  //load the messages
            dataType: "json",
            url: "./thisfile.php",
            method: "POST",
            data: {"read":"messages"},
            success: function(messages){
                if(messages.length){
                    $("#put_here_table").append('<tr><th>Name</th><th>Message</th></tr>');
                    $.each(messages,function(i,msg){
                        $("#put_here_table").append('<tr><td>'+msg['username']+'</td><td>'+msg['mssg']+'</td></tr>');
                    });
                }
            }
        });
    </script>
</body>
</html>

Answer 2

将按钮类型提交更改为按钮。

<button type="button" id="submit" value="submit" />submit</button>

使用textarea，php和flat文件创建简单的jquery表单

2 个答案: