JQuery, PHP, JSON and Ajax

[Strider64]

I hope I put this in the right folder, but if not it can be moved. After spending about two days on the following code I finally have it working.

 

Here's the code (I commented the best that I could):

$(document).ready(function() {
	
  var  d        = new Date(),
  $id      = $('#cmsId'),
  $title   = $('#cmsTitle'),
  $content = $('#cmsContent'),
  saveBtn  = $("#save");
  
  
    $.ajax({ // Start of ajax:
      url: 'data.php?='+d.getTime(),
      timeout: 5000, // Timeout * delay *
      cache: false, // Make sure it doesn't go to cache:
      dataType: "json", // Format type:
      success: function(info) { // Grab the data from php and then display it:

        // Variables * Self-Explanatory *
        var id      = info.id,
        title   = info.title,
        content = info.content;
        
        /* Display Editable Info in Form */
        $id.val(id);     
        $title.val(title);
        $content.append(content);
        
        //console.log('ID', $id, 'Title', $title, 'Content', $content);

      },
      error: function(request, status, error) {
        alert(status + ", " + error);
      }
  	}); // End of ajax call:
  

  saveBtn.click(saveFCN); // Save to database:

  function saveFCN(evt) {
		evt.preventDefault(); // prevent button from firing: 
		
		/* Encode a set of form elements as a string for submission */
		/* For more information goto: http://api.jquery.com/serialize/ */
		var data = $('#sendCMS :input').serialize(); 
		
		/* Save Function by grabbing & sending to location save_data.php */
		$.post($('#sendCMS').attr('action'), data , function(info) { 
			
		$('#debug_message').html(info); // Display the result back when saved:
		
	}); // End of Save:

} // End of Save Function:

}); // End of Doc Ready:

and here's the HTML

    <form id="sendCMS" action="save_data.php" method="post">
      <input type="hidden" name="id" id="cmsId">
    	<label for="cmsTitle" class="cmsLabel">Title</label>
      <input type="text" data-id="1" class="cmsTitle" name="title" id="cmsTitle"><br><br>
      <label for="cmsContent" class="cmsLabel">Content</label><br>
      <textarea class="cmsContent" id="cmsContent" name="content"></textarea>
      
      <button id="save">SAVE</button><br><br>
    </form>
    <div id="debug_message"></div>
    
  </article>

Finally here's my question (Sorry it took this long to get to the point)....I am pretty sure that it's pretty secured for it basically keeps the javascript and php separate. However, I just want to make sure from any security experts that might know different?

 

Here's a small snippet of my php file

$id = htmlspecialchars($_POST['id']);
$title = htmlspecialchars(strip_tags($_POST['title']));
$content = htmlspecialchars($_POST['content']);

// Update the edited text:	 
$query = 'UPDATE  pages SET title=:title, content=:content, dateUpdated=NOW() WHERE id=:id';

// Prepare the Statement:
$stmt = $pdo->prepare($query);

// execute the statement:
$result = $stmt->execute(array('title' => $title, ':content' => $content, ':id' => $id));

if ($result) {
  echo 'Data Successfully Inserted';
} else {
  echo 'Insertion Failed!';
}

As you can see I do you use prepared statments and I like I said the php and jquery (javascript) is separated as much as I could, but I just want to make sure.

 

Thanks in Advanced,

         John

[Strider64]

Please Disregard I already gotten an answer for my question.