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>

变量＆＃39;用户名＆＃39;通过使用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/

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

1 个答案: