Getting data from web service using ajax

Question

I'm trying to get data from a webservice using ajax and POST method.

Ext.Ajax.request({
url: 'http://localhost......',
method:'POST',
   success: function(response) { console.log(response.responseText); },
  failure: function() { Ext.Msg.alert('Fail'); },
  jsonData:{ 
      /*Here I specify my request json*/
    }
}
  });

The above thing works fine but when i try to mimic the same in EXTJS store it responds with a error he server responded with a status of 415 (Unsupported Media Type)

EXTJS STORE CODE

Ext.define('IWM.store.JsonTest', {

    extend: 'Ext.data.Store',
    autoLoad: true,

    fields:['Name'],

    proxy: {

        type: 'ajax',
        method : 'POST',
        actionMethods: {
            create : 'POST',
            read   : 'POST',
            update : 'POST',
            destroy: 'POST'
        },
        jsonData:{
            /*JSON */
            }
        },
        url: 'http://localhost......',

        success: function(response) { console.log(response.responseText); },

        failure:function(){console.log("failed");},

        reader: {

            type: 'json',

            root: 'result',

            successProperty: 'success'

        }

    }

});

What is your web server? Apache or IIS! Also, post your server side code, specifically return value section. — Oğuz Çelikdemir, Feb 20 '14 at 09:18

Oğuz Çelikdemir · Answer 1 · 2014-02-20T09:58:19.417

1

First things first, try to change store config as below.

var IWMStore = new Ext.data.JsonStore({
   // it seems to me you had forgotten model
    model: 'YourDataModel',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'http://your-url-address',
        reader: {
            type: 'json',
            root: 'json-root-value',
            idProperty: 'unique-property-in-json-file'
        }
    }
});

Example JSON value :

// here, ctgMains is the root value, CUST_ASSORT_SECTION_ID is the idProperty
{"ctgMains":[{"CUST_ASSORT_SECTION_ID":"1","CTG_SECTION":"HORECA"},{"CUST_ASSORT_SECTION_ID":"7","CTG_SECTION":"SCO"},{"CUST_ASSORT_SECTION_ID":"3","CTG_SECTION":"TRADER"}]}

Second Attempt : Try to add headers property in your proxy definition, like below:

        proxy: {
            type: 'ajax',
            url: 'http://your-url-address',
            reader: {
                type: 'json',
                root: 'json-root-value',
                idProperty: 'unique-property-in-json-file'
            },
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            }
        }

edited Feb 20 '14 at 09:58

answered Feb 20 '14 at 09:29

Oğuz Çelikdemir

4,990
4
30
56

I'm still getting the same error 'Unsupported Media Type' – Abhijeet Sonawane Feb 20 '14 at 09:43
Post your returning json and model definition. – Oğuz Çelikdemir Feb 20 '14 at 09:49
No :( not working the error still persist. I'm even getting a error specifying 'No operation matching request path /ActionflowResponse is found, HTTP Method : POST, ContentType : application/json, application/x-www-form-urlencoded;charset=UTF-8, Accept : application/json' – Abhijeet Sonawane Feb 20 '14 at 10:37
Are you sure to see json value in browser console? If that so, paste this json in here. – Oğuz Çelikdemir Feb 20 '14 at 10:44
Only when i use Ext.Ajax.Request approach i'm able to see the json. But in Store i'm not able to see the json in console – Abhijeet Sonawane Feb 20 '14 at 11:02
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47935/discussion-between-abhijeet-sonawane-and-oguz-celikdemir) – Abhijeet Sonawane Feb 20 '14 at 11:16
sorry I can't is because of the company rules. There is firewall restriction. – Oğuz Çelikdemir Feb 20 '14 at 11:24
Are there any issues in syntax ? I'm mean this is way we specify a ajax request,right? – Abhijeet Sonawane Feb 20 '14 at 11:33
Actually, I have a same system like you which is working properly. My concern, why you shouldn't use `Ajax.request`? Are there any problem with this way? – Oğuz Çelikdemir Feb 20 '14 at 11:38
How would I do it ? Can I send a request using Ext.Ajax.request on a specific url with jsonData in my UI's initComponent() and set a reader for the same url in store to get the response – Abhijeet Sonawane Feb 20 '14 at 12:18

score 0 · Answer 2 · answered Feb 20 '14 at 14:43

Following on from Oğuz Çelikdemir's answer, you may need to define a json writer for your proxy.

proxy: {
    type: 'ajax',
    url: 'http://your-url-address',
    reader: {
        type: 'json',
        root: 'json-root-value',
        idProperty: 'unique-property-in-json-file'
    },
    writer: {
        type: 'json'
    }
}

That should set the json mediatype header (assuming that's what your request is expecting).

Getting data from web service using ajax

2 Answers2