I am trying to communicate with RIA service from extjs using POST for getting response with following code.
var store = Ext.create('Ext.data.Store', {
model: 'RootResults',
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: 'MyService.svc/JSON/GetRes',
headers: {
'Content-type': 'application/json'
},
reader: {
type: 'json',
root: 'GetResResult.RootResults',
totalProperty: 'GetResResult.TotalCount'
}
, pageParam: undefined,
startParam: undefined,
limitParam: undefined
, success: function (response) {
alert(response);
}
}
});
var operation = new Ext.data.Operation({
FId: 1,
SId: 0
});
store.load({ params: Ext.encode(operation) });
i can access it with get.
when i am trying with POST, it returning error - "405 Method Not Allowed".
what to do to make it POST enabled?
When i asked this question, i am bit confused with POST communication between extjs and RIA services.
I solved this with the help of following article
http://www.joseph-connolly.com/blog/post/WCF-RIA-Services-jQuery-and-JSON-endpoint-Part-2.aspx
For accessing WCF RIA Services from jquery or extjs, actually we need to create changeset for CUD(Create-Update-Delete) operations and All of the operations use JSON/SubmitChanges.
I believe that on the server end you need to add HasSideEffects to your method declaration ():
[Invoke(HasSideEffects = true)]
public GetPages(...)
{
}
Related
I am required to use Ext.Store not Ext.Ajax as my requirement. Here is my code:
Ext.define('Vidly.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
storeId: 'customers',
model: 'Vidly.model.Customer',
autoLoad: true,
proxy: {
type: 'ajax',
headers : {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT',
'Access-Control-Allow-Headers': 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token'
},
api : {
read : 'https://localhost:44378/api/Customers'
},
reader: {
type: 'json',
}
}
});
I keep getting this error: XMLHttpRequest at 'https://localhost:44378/api/Customers?_dc=1612003742512&page=1&start=0&limit=25' from origin 'http://localhost:1967' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am not sure if I should adjust something on my API or on my SPA but I already removed all CORS related code plus it works on my other SPA.
EDIT
Here is my .NET 5 API Startup under ConfigureServices method
services.AddCors();
and under Configure method
app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
I was able to resolve the issue by changing my Ext Store call for some reason it is sending default headers that the API rejects. The video guides in the internet uses my previous syntax, luckily I found a better syntax that overrides the default headers.
Here is the code
Ext.define('Vidly.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
storeId: 'customers',
model: 'Vidly.model.Customer',
autoLoad: true,
proxy: {
type: 'rest',
url: 'https://localhost:44313/api/Customers',
useDefaultXhrHeader: false,
reader: {
type: 'json',
headers: { 'Accept': 'application/json' },
}
}
});
Using type as rest not ajax. Hope this helps others. Thanks.
I have been trying to do a post request using a proxy. I have tried the direct proxy, rest and ajax proxy, and haven't been able to find a working example for a POST request.
Is it possible? Because all the examples that I have seen seen to be using only GET.
Any working examples, or pointers in this direction?
Also, I couldn't figure what is the correct way to generate URLs for a proxy at run-time, for example, calling a function to return the URL.
It appears that this might not be possible:
http://www.sencha.com/forum/showthread.php?205557-Using-Ext.data.proxy.Ajax-via-a-POST-with-jsonData
If you look at the source code for Ext.data.proxy.Rest you'll see a config object for actionMethods. They're not documented, but you should be able to pass that as a config on your proxy to override it.
For example:
proxy: {
type: 'ajax',
url: 'path/to/foo',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'PUT',
destroy: 'DELETE'
},
reader: {
type: 'json',
rootProperty: 'root',
totalProperty : 'totalCount'
}
}
Easiest example of POST request could be like this:
var obj = new Object();
obj.userId = username;
obj.password = password;
var data = Ext.JSON.encode(obj);
Ext.Ajax.request({
url : 'http://myservice/auth/login?_type=json', // url : this.getUrl(),
method : "POST",
headers: {
'Content-Type': 'application/json'
},
params : data,
useDefaultXhrHeader : false,
withCredentials: true,
success : function(response) {
Ext.Msg.alert("Success", "Welcome "+respObj.user.name);
},
failure : function(response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("Error", respObj.status.statusMessage);
}
});
Please note here you can customize url as per your convenience.
I need a cross-domain user login request instance, please help me, thank you！！
My code
Ext.data.JsonP.request({
url: 'http://25.30.2.3:8080/newvbo/applyaction!longin',
params: {
username:'13881901678',
password:'111111',
},
success: function(response, opts) {
alert('1');
},
failure: function(response, opts) {
alert('2');
}
});
My question is, I not receive the server returns the value, I wrong?
You can Try this
Ext.Ajax.request({
method:'GET',
contentType:'application/json; charset=utf-8',
dataType:'json',
url:'http://........Login',
disableCaching: false,
withCredentials: true,
useDefaultXhrHeader: false,
callbackKey: 'callback',
params: {
EmailId:Ext.getCmp('usernametwoway').getValue(),
Password:Ext.getCmp('loginpasswordtwoway').getValue(),
},
success:function(response)
{
console.log(response);
var res = response.responseText;
var jsonarr = Ext.decode(response.responseText);
console.log(jsonarr);
var myres = jsonarr[0].Result;
console.log(myres);
switch(myres)
{
case '1':
console.log("Registration response is successfully");
Ext.Viewport.setActiveItem({xtype:'passengerdetailstwoway'});
break;
case '0':
console.log("Failed");
Ext.Msg.alert("Error","Login Failed",Ext.emptyFn);
break;
Based on the responce you can Specify the Switch case..
Hi #jesse you can try for cross-domain something like this,
Ext.Ajax.request({
url: 'your_url_path',
timeout: 90000,
params: {
withCredentials: true,
useDefaultXhrHeader: false,
username:'13881901678',
password:'111111',
},
success: function(response, o) {
if(response != '') {
alert('1')
}
},
failure: function(response, o) {
alert('2')
}
})
For cross-domain you need put withCredentials: true and useDefaultXhrHeader: false.
I hope help you.
I would like to suggest you a different approach because sending login credentials as GET parameter to remote server over http is not a good idea, instead you should use POST method over HTTPS. Now you would think JSONP doesn't support POST so how can I do this, but if you are going to install your app on Phone or iPad it would do remote call from browser without using JsonP, which means you can use normal AJAX proxy to do whatever you want. Check this out:
How to use json proxy to access remote services during development
Which means this should work:
var obj = new Object();
obj.userId = username;
obj.password = password;
var data = Ext.JSON.encode(obj);
Ext.Ajax.request({
url : 'https://login_url',
method : "POST",
headers: {
'Content-Type': 'application/json'
},
params : data,
useDefaultXhrHeader : false,
withCredentials: true,
success : function(response) {
},
failure : function(response) {
}
});
i'm using extjs4 store
In xhtpp calls it shows the http://localhost/home_dir/index.php/questions/content_pie?_dc=1312366604831&hi=&page=1&start=0&limit=25
This is the store code
var content_type_store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: BASE_URL+'questions/content_pie',
method:'POST',
params :{hi:''}
}),
reader: new Ext.data.JsonReader({
root: 'results'
}, [
'qtype',
'qval'
])
});
Even though i set the method as POST its get params appears in url
I'm using codeigniter as my framework. I disabled GET params in CI. Iwnat to send params in post. with ext2 and 3 this code worked fine..
Help me
Thanks
method:'POST' in proxy's config won't work. There is no such config option. However there are two ways to make store use POST. The simplier one - just override getMethod function:
var content_type_store = new Ext.data.Store({
proxy: {
type: 'ajax',
url: BASE_URL+'questions/content_pie',
extraParams :{hi:''},
// Here Magic comes
getMethod: function(request){ return 'POST'; }
},
reader: {
type: 'json',
root: 'results'
}
});
The second way: override proxy's actionMethods property. If you choose this way your proxy should look like this:
// ...
proxy: {
type: 'ajax',
url: BASE_URL+'questions/content_pie',
extraParams :{hi:''},
// Here Magic comes
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
}
},
// ...
I'm working on a Sencha Touch app and I want to use OData so I have been playing around with the netflix Odata service. When I send my request with JSONP in Sencha I can see the request come back when I trace it, however my callback function is never getting called. Can anyone help? Here is my code.
var blah = function () {
Ext.util.JSONP.request({
url: 'http://odata.netflix.com/catalog/Titles()',
callbackKey: 'callback',
params: {
$format: 'json',
$top: '10',
$filter: "startswith(Name,'C')",
$select: "ShortName"
},
callback: function (result) {
alert('asdf');
var data = result;
if (data) {
alert('data');
} else {
alert('There was an error during retrieving data.');
}
}
});
}
var button = new Ext.Button({
text: 'Ajax',
listeners: {
'tap': blah
}
});
Thanks in advance
If you're getting a syntax error on the server response quotes, this is a known issue described here for which there is an available update.
The server is returning XML, not JSON data.