jquery-ajax

istanbul (nyc) coverage report

Statements	Branches	Functions	Lines

About

A jQuery based AJAX helper library

Installation

Using NPM: npm install @uak2020/jquery-ajax

Using Yarn: yarn add @uak2020/jquery-ajax

Using composer:

First install dropzone: composer require npm-asset/dropzone
Then install extender: composer require oomphinc/composer-installers-extender

Modify your composer.json file like shown below:

{
     "require": {
         "oomphinc/composer-installers-extender": "^1.1",
         "npm-asset/jquery": "^2.2"
     },
     "extra": {
         "installer-types": ["npm-asset"],
         "installer-paths": {
             "public/assets/{$vendor}/{$name}/": ["type:npm-asset"]
         }
     },
     "repositories": [
         {
             "type": "composer",
             "url": "https://asset-packagist.org"
         }
     ],
   ...
}

You can change the key of installer-paths (but not the value) to your desired location in your web application i.e., the "public/assets" part can be modified and try not to remove the later part. You can view the documentation/help at Composer Installers Extender and Asset Packagist and here and here

Usage

Tool 1 Usage - jQuery AJAX Manager

A) Get Requests (JqAjaxGetManager):

Usage pre-conditions:

one must set "userInteraction" field/property of JqAjaxManager object as done below like: ajaxGetMgr.userInteraction = userInteraction;
one must set "jsHelper" field/property of JqAjaxManager object as done/shown below like: ajaxGetMgr.jsHelper = jsHelper;

Example - 1 (get html from local server) - method performAjaxGet

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performAjaxGet(
        'http://localhost:5000/test',
        {
            successMessage: 'page loaded',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'page load error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

You can write whatever code you want inside the body of callbacks. The result parameter of successCallback contains the response returned by the server which is raw (text/plain) in this case.

Example - 2 (get html from live/online server) - method performCorsAjaxGet

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performCorsAjaxGet( // NOTE the change here
        'https://uak2020.herokuapp.com/test',
        {
            successMessage: 'page loaded',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'page load error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // NOTE the change here
    );

Example - 3 (get html from local server) - method performAjaxGet - No messages

Note that successMessage and failureMessage can be omitted as shown below:

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performAjaxGet(
        'http://localhost:5000/test',
        {
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

Example - 4 (get html from local server) - method performAjaxGet - No callbacks

Note that successMessage and failureMessage if provided as shown below, then browser alerts will be shown (This is also true for other examples where messages have been provided)

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performAjaxGet(
        'http://localhost:5000/test',
        {
            successMessage: 'page loaded',
        },
        {
            failureMessage: 'page load error',
        }
    );

Example - 5 (get JSON from local server) - method performAjaxGetJson

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performAjaxGetJson( // Note the change here
        'http://localhost:5000/json',
        {
            successMessage: 'json loaded',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'json load error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

The result parameter of successCallback contains the response returned by the server which is a JSON object in this case. Note that you do not need to convert result into JSON object.

Example - 6 (get JSON from live server) - method performCorsAjaxGetJson

    var { JqAjaxGetManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxGetMgr = new JqAjaxGetManager();
    ajaxGetMgr.userInteraction = userInteraction;
    ajaxGetMgr.jsHelper = jsHelper;
    ajaxGetMgr.performCorsAjaxGetJson( // Note the change here
        'https://uak2020.herokuapp.com/test/json',
        {
            successMessage: 'json loaded',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'json load error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Points to note:

The response is a string/text when following methods are used:
- performAjaxGet
- performCorsAjaxGet
The response is a JSON object when following methods are used:
- performAjaxGetJson
- performCorsAjaxGetJson

B) Simple Post Requests (JqAjaxPostManager):

Usage pre-conditions:

one must set "userInteraction" field/property of JqAjaxManager object as done below like: ajaxGetMgr.userInteraction = userInteraction;
one must set "jsHelper" field/property of JqAjaxManager object as done/shown below like: ajaxGetMgr.jsHelper = jsHelper;

Example - 1 (post text data to local server) - method performAjaxPost

    // Note the change in the line below: we are now using JqAjaxPostManager
    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); // Note the change here
    ajaxPostMgr.userInteraction = userInteraction; // Note the change here
    ajaxPostMgr.jsHelper = jsHelper; // Note the change here
    ajaxPostMgr.performAjaxPost( // Note the change here
        'http://localhost:5000/postraw',
        'id|4+token|NULL-TOKEN3+geo|us', // Note the change here : this is the POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

The result parameter of successCallback contains the response returned by the server which is raw (text/plain) in this case.

Example - 2 (post text data to live server) - method performCorsAjaxPost

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager();
    ajaxPostMgr.userInteraction = userInteraction;
    ajaxPostMgr.jsHelper = jsHelper;
    ajaxPostMgr.performCorsAjaxPost( // Note the change here
        'https://uak2020.herokuapp.com/test/postraw',
        'id|4+token|NULL-TOKEN3+geo|us',
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Example - 3 (post text data to local server and receive JSON) - method performAjaxPostGetJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager();
    ajaxPostMgr.userInteraction = userInteraction;
    ajaxPostMgr.jsHelper = jsHelper;
    ajaxPostMgr.performAjaxPostGetJson( // Note the change here
        'https://localhost:5000/postrawforjson',
        'id|4+token|NULL-TOKEN3+geo|us',
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

The result parameter of successCallback contains the response returned by the server which is a JSON object in this case. Note that you do not need to convert result into JSON object.

Example - 4 (post text data to live server and receive JSON) - method performCorsAjaxPostGetJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager();
    ajaxPostMgr.userInteraction = userInteraction;
    ajaxPostMgr.jsHelper = jsHelper;
    ajaxPostMgr.performCorsAjaxPostGetJson( // Note the change here
        'https://uak2020.herokuapp.com/test/postrawforjson',
        'id|4+token|NULL-TOKEN3+geo|us',
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Example - 5 (post JSON data to local server and receive JSON) - method performAjaxPostJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager();
    ajaxPostMgr.userInteraction = userInteraction;
    ajaxPostMgr.jsHelper = jsHelper;
    const POST_JSON_DATA = {id: 1, email: 'test.mail@example.com', first_name: 'Test', last_name: 'User', avatar: 'https://reqres.in/img/faces/2-image.jpg'}
    ajaxPostMgr.performAjaxPostJson( // Note the change here
        'https://localhost:5000/postjson',
        POST_JSON_DATA,
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

Example - 6 (post JSON data to live server and receive JSON) - method performCorsAjaxPostJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager();
    ajaxPostMgr.userInteraction = userInteraction;
    ajaxPostMgr.jsHelper = jsHelper;
    const POST_JSON_DATA = {id: 1, email: 'test.mail@example.com', first_name: 'Test', last_name: 'User', avatar: 'https://reqres.in/img/faces/2-image.jpg'}
    ajaxPostMgr.performCorsAjaxPostJson( // Note the change here
        'https://uak2020.herokuapp.com/test/postjson',
        POST_JSON_DATA,
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Points to note:

The response is a string/text when following methods are used:
- performAjaxPost
- performCorsAjaxPost
The response is a JSON object when following methods are used:
- performAjaxPostGetJson
- performCorsAjaxPostGetJson
- performAjaxPostJson
- performCorsAjaxPostJson

C) Form submission Post Requests (JqAjaxPostManager):

Usage pre-conditions:

one must set "userInteraction" field/property of JqAjaxManager object as done below like: ajaxGetMgr.userInteraction = userInteraction;
one must set "jsHelper" field/property of JqAjaxManager object as done/shown below like: ajaxGetMgr.jsHelper = jsHelper;

Example - 1 (post form data to local server) - method performAjaxPostForm

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performAjaxPostForm( // Note the change here
        'http://localhost:5000/postform',
        'id=4&token=NULL-TOKEN3&geo=us', // this line has the FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

The result parameter of successCallback contains the response returned by the server which is raw (text/plain) in this case.

Example - 2 (post form data to live server) - method performCorsAjaxPostForm

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performCorsAjaxPostForm( // Note the change here
        'https://uak2020.herokuapp.com/test/postform',
        'id=4&token=NULL-TOKEN3&geo=us', // this line has the FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Example - 3 (post form data to local server and receive JSON) - method performAjaxPostFormGetJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performAjaxPostFormGetJson( // Note the change here
        'http://localhost:5000/postformforjson',
        'id=4&token=NULL-TOKEN3&geo=us', // this line has the FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        }
    );

The result parameter of successCallback contains the response returned by the server which is a JSON object in this case. Note that you do not need to convert result into JSON object.

Example - 4 (post form data to local server and receive JSON) - method performCorsAjaxPostFormGetJson

    var { JqAjaxPostManager, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performCorsAjaxPostFormGetJson( // Note the change here
        'https://uak2020.herokuapp.com/test/postformforjson',
        'id=4&token=NULL-TOKEN3&geo=us', // this line has the FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            }
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            }
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

D) Multi-part Form submission Post Requests (JqAjaxPostManager):

Usage pre-conditions:

one must set "userInteraction" field/property of JqAjaxManager object as done below like: ajaxGetMgr.userInteraction = userInteraction;
one must set "jsHelper" field/property of JqAjaxManager object as done/shown below like: ajaxGetMgr.jsHelper = jsHelper;
one must MultiPartBuilder object to perform single/multiple file uploads along with data

Example - 1 (post multi-part form data - single file - to local server) - method performAjaxPostMultiPartForm

    // Note the change in the line below: we are now also using MultiPartBuilder
    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    // Following 6 lines demonstrate the use of MultiPartBuilder
    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-01')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,80]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('file', 'C:/arrow.jpg') // must be an absolute path
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performAjaxPostMultiPartForm( // Note the change here
        'http://localhost:5000/postformfile',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        }
    );

The result parameter of successCallback contains the response returned by the server which is raw (text/plain) in this case.

Example - 2 (post multi-part form data - multiple files - to local server) - method performAjaxPostMultiPartForm

    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    // Following 7 lines demonstrate the use of MultiPartBuilder for multiple file upload
    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-11')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,100]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('files', 'C:/up-arrow.jpg') // must be an absolute path and use same 1st argument
    multipartBuilder.addFileMultiPart('files', 'C:/down-arrow.jpg') // must be an absolute path and use same 1st argument
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performAjaxPostMultiPartForm( 
        'http://localhost:5000/postformfiles',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        }
    );

Example - 3 (post multi-part form data - single file - to live server) - method performCorsAjaxPostMultiPartForm

    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-02')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,90]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('image_file', 'C:/arrow.jpg') // must be an absolute path
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performCorsAjaxPostMultiPartForm( // Note the change here
        'https://uak2020.herokuapp.com/test/postformfile',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Example - 4 (post multi-part form data - multiple files - to live server) - method performCorsAjaxPostMultiPartForm

    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-11')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,110]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('image_files', 'C:/up-arrow.jpg') // must be an absolute path and use same 1st argument
    multipartBuilder.addFileMultiPart('image_files', 'C:/down-arrow.jpg') // must be an absolute path and use same 1st argument
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performCorsAjaxPostMultiPartForm( 
        'https://uak2020.herokuapp.com/test/postformfiles',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        },
        [{name: 'origin', value: 'http://localhost'}] // Note the change here
    );

Example - 5 (post multi-part form data - single file - to local server and receive JSON) - method performAjaxPostMultiPartFormGetJson

    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-03')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,99]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('file', 'C:/arrow.jpg') // must be an absolute path
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performAjaxPostMultiPartFormGetJson( // Note the change here
        'http://localhost:5000/postformfileforjson',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        }
    );

The result parameter of successCallback contains the response returned by the server which is a JSON object in this case. Note that you do not need to convert result into JSON object.

The above example can be easily extended for multiple files upload with data fields.

Example - 6 (post multi-part form data - single file - to live server and receive JSON) - method performCorsAjaxPostMultiPartFormGetJson

    var { JqAjaxPostManager, MultiPartBuilder, UserInteraction, JsHelper } = require('@uak2020/jquery-ajax');

    const multipartBuilder = new MultiPartBuilder()
    multipartBuilder.start()
    multipartBuilder.addDataMultiPart('name', 'user-04')
    multipartBuilder.addDataMultiPart('json', '[1,3,8,200]') // you need to convert JSON into string
    multipartBuilder.addFileMultiPart('file', 'C:/arrow.jpg') // must be an absolute path
    multipartBuilder.build()
    
    var userInteraction = new UserInteraction();
    var jsHelper = new JsHelper();
    var ajaxPostMgr = new JqAjaxPostManager(); 
    ajaxPostMgr.userInteraction = userInteraction; 
    ajaxPostMgr.jsHelper = jsHelper; 
    ajaxPostMgr.performCorsAjaxPostMultiPartFormGetJson( // Note the change here
        'https://uak2020.herokuapp.com/test/postformfileforjson',
        multipartBuilder, // this line/object has the MULTI-PART FORM POST DATA
        {
            successMessage: 'data submitted',
            successCallback: function (result, url, textStatus) {
                userInteraction.logit(result);
            },
        },
        {
            failureMessage: 'data submission error',
            failureCallback: function (textStatus, errorThrown) {
                userInteraction.logerror(errorThrown);
            },
        }
    );

The above example can be easily extended for multiple files upload with data fields.

Points to note:

The response is a string/text when following methods are used:
- performAjaxPostForm
- performCorsAjaxPostForm
- performAjaxPostMultiPartForm
- performCorsAjaxPostMultiPartForm
The response is a JSON object when following methods are used:
- performAjaxPostFormGetJson
- performCorsAjaxPostFormGetJson
- performAjaxPostMultiPartFormGetJson
- performCorsAjaxPostMultiPartFormGetJson

Tests

yarn test

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

@uak2020/jquery-ajax

jquery-ajax

About

Installation

Usage

Tool 1 Usage - jQuery AJAX Manager

A) Get Requests (JqAjaxGetManager):

Usage pre-conditions:

Example - 1 (get html from local server) - method performAjaxGet

Example - 2 (get html from live/online server) - method performCorsAjaxGet

Example - 3 (get html from local server) - method performAjaxGet - No messages

Example - 4 (get html from local server) - method performAjaxGet - No callbacks

Example - 5 (get JSON from local server) - method performAjaxGetJson

Example - 6 (get JSON from live server) - method performCorsAjaxGetJson

Points to note:

B) Simple Post Requests (JqAjaxPostManager):

Usage pre-conditions:

Example - 1 (post text data to local server) - method performAjaxPost

Example - 2 (post text data to live server) - method performCorsAjaxPost

Example - 3 (post text data to local server and receive JSON) - method performAjaxPostGetJson

Example - 4 (post text data to live server and receive JSON) - method performCorsAjaxPostGetJson

Example - 5 (post JSON data to local server and receive JSON) - method performAjaxPostJson

Example - 6 (post JSON data to live server and receive JSON) - method performCorsAjaxPostJson

Points to note:

C) Form submission Post Requests (JqAjaxPostManager):

Usage pre-conditions:

Example - 1 (post form data to local server) - method performAjaxPostForm

Example - 2 (post form data to live server) - method performCorsAjaxPostForm

Example - 3 (post form data to local server and receive JSON) - method performAjaxPostFormGetJson

Example - 4 (post form data to local server and receive JSON) - method performCorsAjaxPostFormGetJson

D) Multi-part Form submission Post Requests (JqAjaxPostManager):

Usage pre-conditions:

Example - 1 (post multi-part form data - single file - to local server) - method performAjaxPostMultiPartForm

Example - 2 (post multi-part form data - multiple files - to local server) - method performAjaxPostMultiPartForm

Example - 3 (post multi-part form data - single file - to live server) - method performCorsAjaxPostMultiPartForm

Example - 4 (post multi-part form data - multiple files - to live server) - method performCorsAjaxPostMultiPartForm

Example - 5 (post multi-part form data - single file - to local server and receive JSON) - method performAjaxPostMultiPartFormGetJson

Example - 6 (post multi-part form data - single file - to live server and receive JSON) - method performCorsAjaxPostMultiPartFormGetJson

Points to note:

Tests

Contributing

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads