JavaScript $ .GET没有通过

Question

I am building a very simple chat application, nothing too fancy just a way for multiple users to chat at once.

The problem I am having is that whilst I can read and display messages from the database, no new messages will get inserted.

I am using JavaScript to pass a $.Get with the message and the username. I have checked the console and there is no errors showing but I have an undefined index: text and undefined index: username when I use POSTMAN to test.

Can anyone help push me in the right direction to solve this?

chat.php

<div class="wrapper">
            <p id='chat-user'> </p>
            <div id='chat-area'></div>
            <form id='send-message-area'>
                <textarea name="the-textarea" id="the-textarea" maxlength="150" placeholder="Start Typing..."autofocus></textarea>              
            </form>
            <button id='chatSend' class="btn btn-info" type="submit">Post New Message</button>
            <div id="the-count">
                <span id="current">0</span>
                <span id="maximum">/ 150</span>
            </div>
        </div>

var name = prompt("Enter your name:", "Guest");
            if (!name || name === ' ') {
                name = "Guest";
            }
            window.onload = function () {
                document.getElementById("chat-user").innerHTML = "Your are: " + name;
            };

            $(document).ready(function () {
                var chatInterval = 250;                       
                var $chatOutput = $("#chat-area");
                var $chatInput = $("#the-textarea");
                var $chatSend = $("#chatSend");

                function sendMessage() {               
                    var chatInputString = $chatInput.val();

                    $.GET("testProcess.php", {
                        username: name,
                        text: chatInputString
                    });


                    retrieveMessages();
                }

process.php

<?php

error_reporting(E_ALL);
include ("connection.php");


$username = substr($_GET["username"], 0, 32);
$text = substr($_GET["text"], 0, 150);

$nameEscaped = htmlentities(mysqli_real_escape_string($conn, $username)); 
$textEscaped = htmlentities(mysqli_real_escape_string($conn, $text)); 
$timestamp = date("Y-m-d H:i:s");


$insertMessage = "INSERT INTO message (messageID, messageBody, timeSent, nickname, sent) VALUES ('', '$textEscaped', '$timestamp', '$nameEscaped')";
$result = mysqli_query($conn, $insertMessage);

Answer 1

Your postman request is wrong as shown in the picture you are passing the param GET with the value send but in your php script you have $_GET["username"] and $_GET["text"] the method GET is already set in the left side of the url in the picture so you dont need to send it what you want to send is the param username and text so the url would look like this

http://xxxxxxx/testProcess.php?username=Guest&text=test

as for your javascript code the jquery method for get is $.get and not $.GET and you are missing a way to handle the submit of the form because your submit button is outside of the form so a correct way to this would be

    var name = prompt("Enter your name:", "Guest");
    if (!name || name === ' ') {
      name = "Guest";
    }
    window.onload = function() {
      document.getElementById("chat-user").innerHTML = "Your are: " + name;
    };

    $(document).ready(function() {
    var chatInterval = 250;
    var $chatOutput = $("#chat-area");
    var $chatInput = $("#the-textarea");
    var $chatSend = $("#chatSend");

    //intercepting the submit event to call the sendMessage function
    $("#send-message-area").on("submit", function(e) {
      e.preventDefault();
      sendMessage()
    })

    function sendMessage() {
      var chatInputString = $chatInput.val();
      $.get("testProcess.php", {
        username: name,
        text: chatInputString
      });


      retrieveMessages();
    }
  })