I want to send a Request with the content of a textarea but i get only a array instead of the wished string.
<textarea id="putup" name="textarea" cols="70" rows="15">http://www.example.com/?var=2EBR&n=1</textarea>
window.addEvent('domready', function() {
alert($('putup').value);
myRequest = new Request({
method: 'post',
url: 'build2.php',
}).post('var='+$('putup').value+'&uniquebutton='+$('uniquebutton').value);
});
my posts look like this:
Array ( [var] => http://www.example.com/?var=2EBR [n] => 1 [uniquebutton] => aqynnnisqopo )
how to get the real string?
Your code is fine except that your are trying to send a full url in your post without encoding it - which may create a problem if the url also contains parameters - like in your case it's &n=1 that is sending as post param key=>n value=>1 you need to use encodeURIComponent when u send urls and strings that might contains params chars so your param that hold this URL will include the entire URL and won't break it:
myRequest = new Request({
method: 'post',
url: 'build2.php',
}).post('var='+ window.encodeURIComponent($('putup').value)+'&uniquebutton='+$('uniquebutton').value);
and another little remark - in mootools u can use the get function of element to get any valid property of any element - so you can do $('pupup').get('value') but the classic way $('putup').value is perfectly fine of course.
Related
I am unable to concatenate state in URL. Have searched but I could not find the solution, and i'm a beginner sorry for asking such a basic question. State has the value before it is sent as a parameter in URL(i have seen it in console), API returns the expected result if I hard code the value, but if a state or even a variable is passed as a parameter it returns error: "NO records found". What am I doing wrong?
this.state.secid = this.props.navigation.state.params.secid
console.log(this.state.secid)
this.state.classid = this.props.navigation.state.params.clasid
console.log(this.state.classid)
// Sending Request
fetch('exampleapi/parameter?
class=${this.state.classid}§ion=${this.state.secid}',{
headers: {
'Content-Type':'application/json',
'credentials': 'same-origin',
'Accept': 'application/json',
'Authorization': 'Bearer ' + tokenval
}
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({ allstudents : responseJson })
console.log(this.state.allstudents)
})
You need to make following changes in your code
var url = 'exampleapi/parameter?class='+this.state.classid+'§ion='this.state.secid;
fetch(url,{
headers: {
'Content-Type':'application/json',
'credentials': 'same-origin',
'Accept': 'application/json',
'Authorization': 'Bearer ' + tokenval
}
})
Concatenation in react native is done by (+) operator. As URL also a string.
Hope it works for you.
I solved this issue by using backtick notation. Replacing ' '(single quote) in URL by ``(back ticks).
If anybody wants to read more about backtick notation this is an amazing answer : What is the usage of the backtick symbol (`) in JavaScript?
From what I can see in the code added the string concatenation is not done correctly.
It should be done as explained below:
this.state.secid = this.props.navigation.state.params.secid
this.state.classid = this.props.navigation.state.params.clasid
const requestURL = `exampleapi/parameterclass=${this.state.classid}§ion=${this.state.secid}`
Then, I would recommend to log and check if you are getting the URL as expected. Also I would suggest to stick to do this es6 way rather than using + for concatenation (As using + is more error prone, you might miss a space place where required - In your case the place you are setting Authorization header ).
Moreover why not use the good stuff when its supported out of the box by react native
Some references:
https://developers.google.com/web/updates/2015/01/ES6-Template-Strings#string_substitution
https://facebook.github.io/react-native/docs/javascript-environment.html
(search for text Template Literals in the page).
I'm desperately trying to send data via POST to a express.js application. The express.js app works fine but for whatever reason the POST data isn't sent to the server properly:
var xhrConfig = {
url: "http://localhost:3000/test",
body: {"foo": "bar"},
// body: JSON.stringify({"foo": "bar"}),
// body: 'foo=bar',
method: "POST"
};
document.createElement('core-xhr').request(xhrConfig);
My express.js console.log(req.body) output is always {}. No matter if body is sent stringified or raw or JSON. I also tried params instead of body just to make sure.
I tried the same in jQuery to exclude the possibility of having a bug in my express.js route but $.ajax({url: 'http://localhost:3000/test', data: {foo: 'bar'}, type: 'POST'}); works perfectly fine.
So what's the reason that req,body is always empty? Any ideas?
//edit:
body: "foo=bar",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
This one works now but is there a way to be able to use body: {"foo": "bar"} instead of converting it to foo=bar first?
As far as I know, core-xhr is a low level element, and the body object on it's conf doesn't accept a JS object but the string body you want to use.
For the use you describe, you could try core-ajax, a higher level element that can be configured with an object. Doc on core-ajax: https://www.polymer-project.org/docs/elements/core-elements.html#core-ajax.
<core-ajax
auto
url="http://localhost:3000/test"
body='{"foo": "bar"}'
handleAs="json"
method: "POST"
on-core-response="{{handleResponse}}"></core-ajax>
Hope it helps. If you need a more detailed example, don't hesitate to ask.
Looks like express looks at the Content-Type header to determine what type of body it has, below works for me.
this.$.xhr.request({
url: "/my/url",
method: "POST",
headers:{
"Content-Type":"application/json"
},
body: JSON.stringify(survey),
callback: function(response){
console.log(response);
}
});
I had this problem as well on Polymer. This problem is very frustrating because there isn't much documentation on Polymer on core-xhr.
As you have already answered the first question yourself, I'll answer the latter: yes/no. If you look at the source of <core-xhr>, it just feeds the params straight to xhr.send(params). however, there is a method inside of called toQueryString, which does what you want to do.
toQueryString: function(params) {
var r = [];
for (var n in params) {
var v = params[n];
n = encodeURIComponent(n);
r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
}
return r.join('&');
}
I have a Durandal/Hot Towel test app I'm trying to wire up. I have the below ajax call but I'm getting a 404 error.
GET http/.../api/Pizza/GetPizzasByOrderId?%22a8926610-a713-494c-bb15-46f6487a01c7%22 404 (Not Found)
I can manually change the url to:
http/.../api/GetPizzasByOrderId?orderId=a8926610-a713-494c-bb15-46f6487a01c7
It works. But I would like to know why the other call isn't working or more so, why is the ajax messing the parameter up in the URL and not as data like it does with complex objects. I have a get and a save that is working just fine. The get has zero params and the save is passing a complex object in.
C# Web Api Controller:
public class PizzaController : ApiController
{
[HttpGet]
public IEnumerable<Pizza> GetPizzasByOrderId(Guid orderId)
{
return DATA.GetPizzasByOrderId(orderId);
}
}
JAVASCRIPT:
var dataCall = $.ajax(config.getPizzasByOrderIdUrl, {
data: ko.toJSON(orderId),
type: "get",
contentType: "application/json"
});
Should I just change my JavaScript code to the below and be done with it or is there a better way to talk to the Api?
var getPizzasByOrderId = function (orderId) {
return Q.when($.getJSON(config.getPizzasByOrderIdUrl + "?orderId=" + orderId));
};
You could either use the code as you have it in that last code block, or you could pass in an object in place of your orderId as in the code block below. Either way, the difference is that the orderId parameter is being named.
var dataCall = $.ajax({
url: config.getPizzasByOrderIdUrl,
type: "GET",
data: {orderId : orderId},
});
In regard to why $.ajax() works fine for your POST, you can check this out pretty easily by running these two bits of code and viewing the requests that go across the wire. I recommend using google chrome.
Load a page that has jQuery loaded
Open the developer tools and go to the console
Enter the following code snippet
$.ajax("", {
data: {orderId: 123},
type: "get",
contentType: "application/json"
});
Switch to the network tab and click on the one that ends in ?orderId=123
Notice that it does have the data appended as query string parameters
In the snippet above, replace the "get" with "post"
After you hit enter, you should see another request on the network tab of the developer tools.
Notice that when changing nothing but the request type, the data is moved from the query string to the body. As noted in the comments, WebApi will pull from the body of the request and use the model binder to populate the complex object.
This is my code for the .ajax() call:
$.ajax({
type: "POST",
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
}
In addition to using type:"POST" as above, I also tried using $.ajaxSetup({type: "post"}); above this code block.
In both cases, the values in the data key are being appended to the URL. I want a clean URL with no parameters. This code is actually a part of an autocomplete field, it's wrapped into an anonymous function and given a key source like the main jQueryUI examples.
Note The actual URL is immaterial, I don't know if geonames supports POST requests but that's going to change later, this is just an example.
Simply add your parameters like this :
url: "http://ws.geonames.org/searchJSON/" + param,
If you want to force POST, you can try jQuery.post()
It is not possible to make a POST request with the JSONP datatype.
JSONP works by creating a <script> tag that executes Javascript from a different domain, it is not possible to send a POST request using a <script> tag.
If you specify dataType: "jsonp" and type: "POST", the "jsonp" takes precedent and it gets sent as a "GET" request (the "POST" gets ignored).
I am calling an ASP.NET MVC action
public JsonResult GetPatient(string patientID)
{
...
from JavaScript using jQuery. The following call works
$.getJSON(
'/Services/GetPatient',
{ patientID: "1" },
function(jsonData) {
alert(jsonData);
});
whereas this one does not.
$.ajax({
type: 'POST',
url: '/Services/GetPatient',
data: { patientID: "1" },
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(jsonData) {
alert(jsonData);
},
error: function() {
alert('Error loading PatientID=' + id);
}
});
Both reach the action method, but the patientID value is null w/ the $.ajax call. I'd like to use the $.ajax call for some of the advanced callbacks.
Any thoughts appreciated.
Content-type
You don't need to specify that content-type on calls to MVC controller actions. The special "application/json; charset=utf-8" content-type is only necessary when calling ASP.NET AJAX "ScriptServices" and page methods. jQuery's default contentType of "application/x-www-form-urlencoded" is appropriate for requesting an MVC controller action.
More about that content-type here: JSON Hijacking and How ASP.NET AJAX 1.0 Avoids these Attacks
Data
The data is correct as you have it. By passing jQuery a JSON object, as you have, it will be serialized as patientID=1 in the POST data. This standard form is how MVC expects the parameters.
You only have to enclose the parameters in quotes like "{ 'patientID' : 1 }" when you're using ASP.NET AJAX services. They expect a single string representing a JSON object to be parsed out, rather than the individual variables in the POST data.
JSON
It's not a problem in this specific case, but it's a good idea to get in the habit of quoting any string keys or values in your JSON object. If you inadvertently use a JavaScript reserved keyword as a key or value in the object, without quoting it, you'll run into a confusing-to-debug problem.
Conversely, you don't have to quote numeric or boolean values. It's always safe to use them directly in the object.
So, assuming you do want to POST instead of GET, your $.ajax() call might look like this:
$.ajax({
type: 'POST',
url: '/Services/GetPatient',
data: { 'patientID' : 1 },
dataType: 'json',
success: function(jsonData) {
alert(jsonData);
},
error: function() {
alert('Error loading PatientID=' + id);
}
});
.getJson is simply a wrapper around .ajax but it provides a simpler method signature as some of the settings are defaulted e.g dataType to json, type to get etc
N.B .load, .get and .post are also simple wrappers around the .ajax method.
Replace
data: { patientID: "1" },
with
data: "{ 'patientID': '1' }",
Further reading: 3 mistakes to avoid when using jQuery with ASP.NET
There is lots of confusion in some of the function of jquery like $.ajax, $.get, $.post, $.getScript, $.getJSON that what is the difference among them which is the best, which is the fast, which to use and when so below is the description of them to make them clear and to get rid of this type of confusions.
$.getJSON() function is a shorthand Ajax function (internally use $.get() with data type script), which is equivalent to below expression, Uses some limited criteria like Request type is GET and data Type is json.
Read More .. jquery-post-vs-get-vs-ajax
The only difference I see is that getJSON performs a GET request instead of a POST.
contentType: 'application/json; charset=utf-8'
Is not good. At least it doesnt work for me. The other syntax is ok. The parameter you supply is in the right format.
with $.getJSON()) there is no any error callback only you can track succeed callback and there no standard setting supported like beforeSend, statusCode, mimeType etc, if you want it use $.ajax().