Icontem

JS Parameters Transmitter: Send form parameter data via AJAX PUT or POST

Recommend this page to a friend!
  Info   View files Example   View files View files (7)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-11-15 (3 years ago) RSS 2.0 feedNot enough user ratingsTotal: 101 This week: 1All time: 403 This week: 12Up
Version License JavaScript version Categories
parameters-transmit 1.1MIT/X Consortium ...1.2AJAX, Forms
Description Author

This object can send form parameter data via AJAX PUT or POST.

It can take the names and values of parameters to be stored on the browser side and sent to the server later.

The object can send AJAX requests to the server encoding the parameters in the request body.

The parameters can be sent via HTTP PUT encoded as a JSON string or via HTTP POST as hidden form inputs.

A given callback function is called after the request response is returned. The objects passes the decoded response to the callback function.

Innovation Award
JavaScript Programming Innovation award nominee
November 2015
Number 2


Prize: One book of choice by Packt
AJAX requests often are used to pass parameters to the server. Usually those parameter values are passed using POST parameters in the request body or GET parameters in the URL.

This object can also send AJAX PUT requests passing parameters in the body of the request, encoding the values in JSON format.

Manuel Lemos
  Performance   Level  
Name: Vallo Reima <contact>
Classes: 6 packages by
Country: Estonia Estonia
Age: ???
All time rank: 351 in Estonia Estonia
Week rank: 2 Up1 in Estonia Estonia Equal
Innovation award
Innovation award
Nominee: 4x

Winner: 1x

Details

JS parameters transmission

The communication between JavaScript client-side (hereinafter JS) and PHP server-side, for example, requires the two-way exchange of the parameters. You need to solve the following tasks to coordinate the activity on both sides:

  • prepare the storage data server-side and accept them client-side;
  • send/receive the request/response parameters;
  • handle the storage and the parameters.

There are many different solutions for that and ParmTran JavaScript class is one of them. This class supplies necessary front-end methods but assumes according support from the back-end.

How it works

The back-end prepares and encodes the storage data, and places the data inside the HTML to be sent to the front-end. JS accepts the data and saves it into the storage. The storage data is accessed by the Get/Set methods and used internally.

JS makes requests via GET/POST where AJAX request sends the JSON string in the request body. The back-end detects the request format and saves the parameters. The AJAX response is returned with the array in specific format (see below).

The ParmTran can be complemented with more methods and properties. So, it can be a template for your own framework.

The usage

You can instantiate in the global scope making the functionality available overall:

var ts = new ParmTran( [ id ] );

id - the form id from where to read the storage data (default by 'transit'):

The encoded data is located between the form tags. The data is decoded and saved, and the form content is cleared. This form and its action attribute are used further to send the requests.

Methods

ts.Get( name );

Read the data element from the storage.

  • name - element name (property)

ts.Set( name, value );

Write the data element into the storage.

  • name - element name (property)
  • value - element (property) value

ts.Enc( data [, flag = false ] );

Convert the data to (encoded) json string

  • data - input object, array, ...
  • flag - bool (true - urlencode the output string)

ts.Dec( data [, flag = false ] );

Convert the (encoded) json string to the data object

  • data - the string
  • flag - bool (true - urldecode the string)

ts.Send( parm [ , meth = 'post' ] );

Send GET/POST request.

  • parm - request parameters object
  • meth - request method name (get/post)

ts.Ajax( parm , func [ , meth = 'post' ] );

Make AJAX request.

  • parm - request parameters object
  • func - callback function to receive the response
  • meth - request method name (put/post)

AJAX response

The callback specified in the Ajax method receives two arguments:

  • resp - response object; back-end must return it in the following format: - status - bool (true - success, false - failed) - prompt - any prompt/error text or array of text lines - factor - action result data (format depends on the context)
  • parm - request parameters object

The example

The example.php processes the following requests:

  1. startup - fills the demo table with the server-side data;
  2. POST - receives the request data and fills the demo table with the client-side data;
  3. AJAX - receives the request data and returns the client-side data; the front-end fills the table;
  4. GET - returns to (1) with the usage notice

The prompt text under the heading indicates the current status. Examine the example files to follow the class' usage and the communication logic.

The package

Upload the files to any web directory and run the example.php. The following files are included:

  • ParmTran.js - the parameters transmission class
  • example.php - the sample's back-end
  • example.phtml - the sample's template
  • example.js - the sample's front-end
  • [ParmOpts.php] - the class to handle parameters and options (used by example)
  • readme.md

Please [contact] on any product-related questions.

[ParmOpts.php]: http://www.phpclasses.org/package/9457.html [contact]: mailto://vallo@vregistry.com

  Files folder image Files  
File Role Description
Accessible without login Plain text file example.js Example Example script
Accessible without login Plain text file example.php Data Auxiliary data
Accessible without login Plain text file example.phtml Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file ParmOpts.php Data Auxiliary data
Plain text file ParmTran.js Class Class source
Accessible without login Plain text file README.md Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
 100%
Total:101
This week:1
All time:403
This week:12Up