William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

jQuery: JSON and PHP:json_encode example

jQuery JSON and PHP json_encode example

I have a table to list some real data, which are on-time notes about project processing:

<table><thead>
 <tr>
  <th>No.</th>
  <th>Who Did</th>
  <th>When Did</th>
  <th>Notes</th>
  <th>...</th>
 </tr>
</thead>
<tbody>
...
<td><textarea name="notes" id="<?=$id;?>" class="notes"
 readonly="readonly"
 onDblClick="$(this).removeAttr('readonly').css('border-width','2px');"
 onChange="$(this).notes('<?=$id;?>')"><?=$row['notes'];?></textarea>
 </td>
</tbody>
</table>

The notes textarea is editable. I am going to use PHP’s json_encode() and jQuery’s json to implement a loop of AJAX-style edit and refresh. The steps:

  1. Double click textarea ‘notes’, to edit it.
  2. When finished, mouse leaves (e.g. click ‘tab’ to escape the textarea box), the notes is kept in MySQL table.
  3. After the storing, select table to get the latest record, and return in a JSON-style associate array.
  4. jQuery receives the JSON array, to use it to refresh this edited <tr> row.
  5. That means the columns: Who, When and Notes all get refresh automatically.

For the ‘notes’ textarea:

  1. If the notes changes, do the refresh; if not change, then no refresh: ‘onchange‘ event.
  2. the notes arribute include readonly, it is neccessary, coz only double click to enable editing.

This is the typical case using jQuery’s JSON. The following is the jQuery function to implement above steps:

jQuery.fn.notes = function(id) {
  var notes = $('#'+id).val();
  var tr = $(this).closest('tr');
  $.ajax({
    type: 'post',
    url: url,
    data: 'id='+id+'&notes='+notes,
    dataType: 'json',
    success: function(data) {
      $(tr).find('td:eq(1)').text(data.username);
      $(tr).find('td:eq(2)').text(data.created);		
      $('#'+id).val(data.notes);
    }
  });
  return false;
}

The jQuery.notes() function sends a http request (POST) to PHP, PHP operates the Database, and return the results. The following is the PHP’s reaction:

if(isset($_POST['notes']) || isset($_POST['id'])) {
 $sql = "update table set notes='".
    mysql_real_escape_string(trim($_POST['notes']))."' 
   WHERE active='Y'  AND id=".$_POST['id'];
 mysql_query($sql) or die (mysql_error());
 $res = mysql_query("SELECT * FROM test WHERE id=".$id);
 $data = mysql_fetch_assoc($res);
 mysql_free_result($res);
 echo json_encode($data);
}

Here I use PHP’s json_encode function. The json_encode returns an associate array instead of plain data to Javascript (here is jQuery AJAX). Its return like this:

{"id":"2","uid":"88","username":"test",
  "created":"2011-09-30 10:31:02","result":"Done",
  "notes":"this is a 'test'.\nnew adding.","active":"Y"}

So when success, PHP sends JSON array data to jQuery, jQuery use the data to refresh the editing row:

success: function(data) {
 $(tr).find('td:eq(1)').text(data.username);
 $(tr).find('td:eq(2)').text(data.created);		
 $('#'+id).val(data.notes);
}

That’s a whole processing of a Javascript:json and PHP:json_encode. It is largely used in modern web apps.

Advertisements

2 responses to “jQuery: JSON and PHP:json_encode example

  1. dieta 10/10/2011 at 12:09 am

    Proposed since October 2011…..SIGKILL..Description.Kill signal…Default action.Abnormal termination of the process…SA SIGINFO macros….None…..On -compliant platforms SIGKILL is the sent to a to cause it to terminate immediately. Symbolic signal names are used because signal numbers can vary across platforms however on the vast majority of systems SIGKILL is signal 9.

  2. powercashadvance.com 10/26/2011 at 4:44 pm

    I won’t be able to thank you fully for the posts on your web page. I know you put a lot of time and effort into all of them and truly hope you know how much I enjoy it. I hope I am able to do precisely the same for someone else someday.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: