Access to REST API from JS

Question

Need access to REST API from JS code, using jQuery ajax:

function tryQwintry () {
    var data = {
        "params[weight]" : "100",
        "params[dimensions]" : "100x100x100",
        "params[delivery_pickup]" : "msk_1",
        "params[insurance]" : "false",
        "params[items_value]" : "350",
        "params[retail_pricing]" : "1"
    };

    $.ajax({
        url: "http://logistics.qwintry.com/api/cost",
        type: "POST",
        dataType: "jsonp",
        contentType: "application/json",
        headers: {"Authorization":"Bearer " + MY_API_KEY},
        data: data,
        success: function (cost) {
            console.log("стоимость доставки $"+cost);
        },
        error: getErrorMsg
    });
}

Documentation of API (all examples are PHP):

<?php
    define('SITE_URL', 'logistics.qwintry.com');
    define('API_KEY', 'YOUR_API_KEY'); //don't forget to set your key!

    $url =  'http://'. SITE_URL .'/api/cost';


    $data = array ( 
        'params' => array(
            'weight' => 5, // in lb
            'delivery_pickup' => 'msk_1', // full list of pickup points can be retrieved from /api/locations-list
            'insurance' => true,
            'items_value' => 500, // declaration items total cost in USD
            'retail_pricing' => true // retail / wholesale pricing?
        ),
     );
    $data_string = http_build_query($data);

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '. API_KEY));
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS,  $data_string);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    $response = curl_exec($ch);
    curl_close($ch);
    var_dump($response);

Same thing I've coded in Java:

public double getCostPickup(String weight, String dimensions, String toPickup, String insurance, String value) throws Exception {

    Map<String, Object> params = new HashMap<>();
    params.put("params[weight_kg]", weight);
    params.put("params[dimensions_cm]", dimensions);
    params.put("params[delivery_pickup]", toPickup);
    params.put("params[insurance]", insurance);
    params.put("params[items_value]", value);
    params.put("params[retail_pricing]", RETAIL_PRICING);

    String url = BASE_URL+"/api/cost";
    HttpResponse<JsonNode> jsonResponse = Unirest.post(url).fields(params).asJson();
    return getCost(jsonResponse, insurance);
}

Have problems with configuring data of ajax request. So any help would be greatly appreciated.

UPDATE: Changed my JS code:

function tryQwintry () {
    var data = {
        "params[weight]" : "100",
        "params[dimensions]" : "100x100x100",
        "params[delivery_pickup]" : "msk_1",
        "params[insurance]" : "false",
        "params[items_value]" : "350",
        "params[retail_pricing]" : "1"
    };

    $.ajax({
        url: "http://logistics.qwintry.com/api/cost",
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        headers: {"Authorization" : "Bearer"+MY_API_KEY, "Access-Control-Allow-Origin" : "true"},
        data: JSON.stringify(data),
        success: function (cost) {
            console.log("стоимость доставки $"+cost);
        },
        error: getErrorMsg
    });
}

Getting this error in Chrome's developers mode:

You cannot use POST request using jsonp. Set a GET request or don't use jsonp — A. Wolff
– A. Wolff, Commented Sep 30, 2016 at 16:27
So replace jsonp by json as datatype. Again like said before, it is not possible to use POST for jsonp stackoverflow.com/a/3860117/1414562 — A. Wolff
– A. Wolff, Commented Sep 30, 2016 at 18:10

Community · Accepted Answer · 2017-05-23 12:15:07Z

1

Are you using CORS request?

If no then change datatype to "json" instead "dataType: "jsonp".

if you are doing CORS then enable CORS request then you need to add the php code to allow CORS request.

header("Access-Control-Allow-Origin: *");

check this link CORS with php headers

Json data format:

 var data = {
        weight : 100,
        dimensions : "100x100x100",
        delivery_pickup : "msk_1",
        insurance : false,
        items_value : 350,
        retail_pricing : 1
    };

$.ajax({
    url: "http://logistics.qwintry.com/api/cost",
    dataType: "jsonp",
    contentType: "application/json",
    headers: {"Authorization":"Bearer " + MY_API_KEY},
    data: JSON.stringify(data),
    success: function (cost) {
        console.log("стоимость доставки $"+cost);
    },
    error: getErrorMsg
});

Note: method: "POST" is not allowed with JOSNP

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Sep 30, 2016 at 16:02

Ram

5143 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zzheads Over a year ago

First, yes it's CROS request. Don't mind PHP code, it's just example from APIs documentation, I need properly configure JS

Collectives™ on Stack Overflow

Access to REST API from JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related