I'm trying to take my PHP shoutbox and query using AJAX so that the page doesn't have to reload for shouts to be posted. Any help would be greatly appreciated!
I am stuck - I keep receiving a parse error:
18:47:27.216 Details: parsererror
Error:SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data 1 index.php:100:4
I've got shoutBox.php, which holds the HTML and AJAX:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
function sendChatMessage(msg)
{
$.ajax({
type: "POST",
url: "login/postData.php",
data: {
thisPost: msg
},
dataType: "json",
success: function(data)
{
if (data.error === false)
{
$("#aData").text(data);
console.log("Post submitted.");
ajax.reload();
}
else
{
console.log("Post was not submitted.");
}
},
error: function(xhr, desc, err)
{
console.log(xhr);
console.log("Details: " + desc + "
Error:" + err);
}
});
}
</script>
<div class="shoutbox">
<h1 class="panel-heading"><strong>Federal</strong> Communications Array</h1>
<hr>
<ul class="shoutbox-content"></ul>
<div class="panel">
<form method="post">
<p>
<table border="0" align="center" style="height: auto;" width="90%">
<tbody>
<tr>
<td><a></a></td>
<td>
<div class="input-group">
<span class="input-group-addon">Say:</span>
<input class="form-control" id="aData" name="post" maxlength='255' placeholder="Enter a message..."></input>
<div class="input-group-btn">
<button class="btn btn-success" onClick="sendChatMessage(document.getElementById('aData').value); return false;">Send</button>
</div>
</div>
</td>
<td></td>
</tr>
</tbody>
</table>
<p>
</form>
</div>
<div class="panel">
<table class="table table-striped">
<thead>
<tr>
<th width="100px">Timestamp</th>
<th width="120px">Username</th>
<th width="980px">Message</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
And postData.php, which (is supposed to) execute the query.
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
echo('Script begin.');
require "dbconf.php"; // db details
$connect = mysql_connect($host,$username,$password);
mysql_select_db($db_name,$connect);
$post = '';
if(empty($_POST['aData']))
{
exit(json_encode([
'error' => 'You must enter a message!',
]));
} else {
$post = trim($_POST['aData']);
$playerUsername = $_SESSION['username'];
$idQuery = "SELECT `id` FROM `members` WHERE `username`='$playerUsername'";
$playeridQuery = mysql_query($idQuery);
$playerID = mysql_result($playeridQuery, 0);
mysql_query("INSERT INTO `shoutboxPosts` SET `id`='$playerID', `username`='$playerUsername', `post`='$post'");
}
exit(json_encode([
'error' => false,
]));
?>
Remove a single line
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
//echo('Script begin.'); Remove this line. It's violating JSON format
require "dbconf.php"; // db details
$connect = mysql_connect($host,$username,$password);
mysql_select_db($db_name,$connect);
$post = '';
if(empty($_POST['aData']))
{
exit(json_encode([
'error' => 'You must enter a message!',
]));
} else {
$post = trim($_POST['aData']);
$playerUsername = $_SESSION['username'];
$idQuery = "SELECT `id` FROM `members` WHERE `username`='$playerUsername'";
$playeridQuery = mysql_query($idQuery);
$playerID = mysql_result($playeridQuery, 0);
mysql_query("INSERT INTO `shoutboxPosts` SET `id`='$playerID', `username`='$playerUsername', `post`='$post'");
}
exit(json_encode([
'error' => false,
]));
?>
Your parse error come from this line:
$("#aData").text(data);
You can't send Json encoded data to a id in the DOM. You want see value of data,try this:
alert(JSON.stringify(data));
Other thing, in your php, avoid exit, forgot if and else.
Proper way is try, catch. You try, if error happend, catch exception.
Put a global variable outside your function and put the awswer inside.
After just:
echo json_encode($aswer); $connect = null; // always close your connection.
I hope it will help you.