获取聊天系统输入表单的问题

Question

目前在制作聊天系统时遇到问题。这是漫长的一天，所以当我尝试编写代码时，我的大脑已经停止了一半。 简而言之，我正在尝试使用 PHP 和 JavaScript 的 jQuery 框架来制作一个聊天系统。在发现仅使用 PHP 行不通后，我读到我可以使用 Ajax 来防止在尝试发送消息时重新加载页面（重新加载页面会导致聊天用户名被重置）。我已经编写了代码，并且尝试从主代码中的输入表单中获取值，我个人认为这是这里的问题。 我确定影响这一点的代码部分如下：

<!-- CHAT BOX -->
    <div class="content" style="width:700px;">
        <div class="container" style="height:500px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:0px solid black;overflow-y:scroll;">
        <script type="text/javascript">
            var msgdisp = new XMLHttpRequest();
            msgdisp.open("GET","chatlog/log.txt");
            var lines = msgdisp.result.split('\n');
            for(var line = 0; line < lines.length; line++) {
                document.write(line);
            }

        </script>
      </div>
        <form>
            <input name="chateroo" placeholder="Chat" style="width:678px;height:8px;text-align:left;padding:10px;border-radius:0px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:1px solid grey;"/>           </form>
    <script type="text/javascript">

        var message = (username + ": "+document.getElementByName("chateroo").value());
        $.ajax({
            url: "include/chatsvs.php",
            data: {chat: message},
            type: 'post',
            success: alert('Successfully sent message');
        });
    </script>
    </div>

变量 'username' 是在代码中较早创建的，方法是使用 PHP 创建用户名，然后将该值回显到 JavaScript 变量以供以后使用。如果它很重要，这是我设置用户名的部分。

<?php
    //Setting the username
    echo("<div id=\"inputmessage\" style=\"padding:10px;width:500px;background-color:white;position:relative;display:inline-block;margin-top:20px;\">");
    if(isset($_POST['name_input'])) {

        $chatname = $_POST['name_input'];
        echo("<h2>Chatting as $chatname</h2>");
    }
    else {
        echo("<h2>Set your username:</h2>");

    }
    echo("<form method=\"POST\">");
    if(isset($chatname)) {

        echo("<input name=\"name_input\" id=\"nameipt\" type=\"text\" placeholder=\"Change username\" style=\"text-align:left;background-color:#E3E3E3;color:black;border-radius:1px;\">");
    }
    else {
        echo("<input name=\"name_input\" type=\"text\" placeholder=\"Set username\" style=\"text-align:left;background-color:#E3E3E3;color:black;border-radius:1px;\">");
    }

    echo("</form></div>");

    if(isset($chatname)) {

        echo("<script type=\"text/javascript\">
        var nameset = true;
        var username = $chatname;
        </script>");
    }
    ?>

我有一个外部 PHP 文件，它将消息记录到一个文本文件中，然后读入容器，这是我应该修复的其他问题。

如果有人能帮我解决这个问题，我将不胜感激。请记住，我只是一名计算机科学专业的学生。很多技术词汇以及极其高级的代码可能会在我脑海中浮现。我还不错，但绝对不是专家。

我学习了 HTML、CSS、PHP，并了解 jQuery 的基础知识。

谢谢！

Answer 1

不要在 HTML 中间包含 jquery 代码不是好的编码习惯。

        <!-- CHAT BOX -->
            <div class="content" style="width:700px;">
                <div class="container" style="height:500px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom:0px solid black;overflow-y:scroll;">
              </div>
                <form>
                    <input name="chateroo" id="chateroo" placeholder="Chat" style="width:678px;height:8px;text-align:left;padding:10px;border-radius:0px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:1px solid grey;"/>           </form>
            </div>
<!-- Juery Code-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                <script type="text/javascript">
                    var msgdisp = new XMLHttpRequest();
                    msgdisp.open("GET","chatlog/log.txt");
                    var lines = msgdisp.result.split('\n');
                    for(var line = 0; line < lines.length; line++) {
                        document.write(line);
                    }

    var chatMsg=$("#chateroo").val();   
    var message = ("username" + ":"+ chatMsg);
                $.ajax({
                    url: "include/chatsvs.php",
                    data: {chat: message},
                    type: 'post',
                    success: alert('Successfully sent message');
                });

查看http://jsfiddle.net/ddtxra/60wme3pf/