Jquery ajax Post 不工作？

Question

I have used ajax post without form. When I click submit button it should get the values of other fields. Post request is not being sent and neither output is being shown. It is returning this error Unexpected identifier

Here are the input fields

<input type="text" name="name" id="name" class="center-block Ename" placeholder="Enter you name">
            <textarea class="center-block" name="message" id="message" rows="1" placeholder="Enter your message"></textarea>
            <input class="center-block sendBtn" type="submit" id="submit" name="submit" value="Submit">

This is the ajax request.

$(document).ready(function(){
        var interval = setInterval($('#submit').click(function(){
            var values = {
                'name': document.getElementById('name').value,
                'message': document.getElementById('message').value
            };
            $.ajax({
                type: "POST",
                url: "chat.php",
                data: values,
                success: function(data){
                    $("#chat").html(data);
                }
            });

        }),1000);

    });

It is sending request to this php page

<?php
include 'db.php';


//Here post data is being assigned to variables
        $name = $_POST['name'];
        $message = $_POST['message'];
        $queryInsert = "INSERT INTO chat(`name`, `message`) VALUES('$name', '$message')";
        $queryInsertRun = mysqli_query($con, $queryInsert);
        if(!$queryInsertRun){
            echo mysqli_error($con);
        }



//Here is the output which should be shown

$query = "SELECT * FROM `chat` ORDER BY `name` AND `message` DESC ";
$queryRun = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($queryRun)){
$name = $row['name'];
$message = $row['message'];
?>
    <span class="name" style="font-weight: bold"><?php echo  $name?>:</span>
    <span class="message"><?php echo  $message.'<br>'?></span>
    <hr>
<?php
}
?>

I want to know that why is this not working.

Answer 1

It sounds like your JSON Data is not valid.

var data = JSON.stringify(values);
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: data,
  dataType: "html" // read about dataType
});

Answer 2

try this code

function ajaxcall()
{
console.log('i am called');
        var values = {
            'name': document.getElementById('name').value,
            'message': document.getElementById('message').value
        };

             $.ajax({
                type: "POST",
                url: "chat.php",
                data: values,
                success: function(data){
                    $("#chat").html(data);
                }
            });

}

$(document).ready(function(){
var id = setInterval(function() {
   ajaxcall();
}, 1000);
    });

http://jsfiddle.net/cod7ceho/116/

Answer 3

You want to display data if you clicked submit button , use simple click function . Using setInterval can't help you for clicking submit . JS

$(document).ready(function(){
        $('#submit').click(function(){
            var values = {
                'name': document.getElementById('name').value,
                'message': document.getElementById('message').value
            };
            $.ajax({
                type: "POST",
                url: "chat.php",
                data: values,
                success: function(data){
                    $("#chat").html(data);
                }
            });

        });
      });