Develop Reference

AJAX request cannot pass DateTime to server if using GET method

I have a form which uses Kendo controls, and when user click the button, an AJAX request gathering these controls' value will be sent to server and download a file based on these criteria. One of the controls is DateTimePicker.
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: '#Url.Action("MyGenerateReportMethod")',
async: true,
data: getViewModel(),
...
});
function getViewModel() {
...
viewModel.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
...
return JSON.stringify({ para: viewModel });
}
public ActionResult MyGenerateReportMethod(MyModel para)
{
try{
...
}
}
public class MyModel
{
public DateTime? DateFrom { get; set; }
}
The above simplified code demonstrate my situation.
I have a POST ajax request to server, which passes a serialized JSON object including a Kendo DateTimePicker Value.
The server side action try to catch this JSON object as parameter and do the stuff which is irrelevant to this question.
My question is, for some reason I have to changed the request from POST to GET.
While it works using POST method, it does not work if I change "POST" to "GET".
I checked the request sent in Chrome's Developer Tools, It does sent the JSON object in the following format: (In Query String Parameters section in the Network Tab)
{"para": {
...
"DateFrom":"2016-04-13T16:00:00.000Z"
...
}
}
However, at server side, MyModel para does not seems to catch this object successfully (if I change from "POST" to "GET"). Other fields still can be bound while all DateTime fields become null.
Why is this happening, and how can I change the request from "POST" to "GET"?
Thanks.
EDITED
Based on some comments / answers, I have tried to modified the AJAX request to the following code, but it is still not working... (Same behavior)
$.ajax({
type: 'GET',
url: '#Url.Action("SumbitOutstandingReportList")',
data: getPlanViewModel(),
async: true,
...
}
function getPlanViewModel(){
var obj = {};
...
obj.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
...
return { para: obj };
}

A GET does not have a body, so remove the contentType: "application/json; charset=utf-8", option (does no harm but its only applicable to a POST) and adjust the data so that the ajax call is
$.ajax({
type: 'Get',
url: '#Url.Action("MyGenerateReportMethod")',
data: getViewModel(),
...
});
function getViewModel() {
var obj = {};
...
obj.DateFrom = $("#DateRangeFrom").data("kendoDatePicker").value();
...
return obj; // return the object, not a stringified object containing another object
}
Note this assumes the value is in a format that matches your server culture, or in ISO format (e.g. the request will be DateFrom: '2016-04-13T16:00:00.000Z')

This is happening because of, GET method is pass data in a header or url, while json data can not passed through header, change the method of passing data, which is currently in a json format.
You could do like even :
var fd = new FormData();
fd.append('data', yourData);
and send fd as a directly data object, it will work.

GET request has no body, it passes the parameters in either cookies or URL query string, so pass the data you want in a query string parameter like below:
var url = #Url.Action("MyGenerateReportMethod",new {DateFrom="_X_"});
url = url.replace("_X_",$("#DateRangeFrom").data("kendoDatePicker").value());
$.ajax({
type: 'GET',
url: url,
async: true
});

Update a Table Per Hierarchy entity from JS or JQUERY

I have created a ENTITY FRAMEWORK model of a CARS table and made two TPH entities on EDMX designer and named them OLD CAR and NEW CAR, have set me CARS table to Abstract.
Now, I am accessing the CARS entity from JQUERY and I can do the following:
GET (working fine)
DELETE (working fine)
but I am not able to CREATE (POST) or UPDATE (PUT) into the derived inherited entities, it gives me the following error " Types information must be specified for types which are inherited"
I have exposed all of my entities from WCF Data Services
below is my code;
function putData() {
var url = "http://localhost:55153/WebSite3/WcfDataService1.svc/Cars(2)";
var obj = '{"CarName": "Margalla", "CarModel" : "Honda"}';
var r = window.JSON.stringify(obj);
$.ajax({
type: "PUT",
url: url,
data: obj,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("Updated successful");
},
error: function (msg) {
alert(msg.responseText);
}
});
}

The problem here is that the server doesn't know which type of car you're trying to insert (or modify).
Try changing your payload to include the "odata.type" property. For example:
var obj = '{
"odata.type": "YourNamespace.OldCar",
"CarName": "Margalla",
"CarModel" : "Honda"
}';
The "odata.type" property is specific to the new JSON format (v3 OData only), so I would also suggest including the "DataServiceVersion" header on the request to make it clear to the server that you are sending a v3 payload. For example:
$.ajax({
...
beforeSend: function (request)
{
request.setRequestHeader("DataServiceVersion", "3.0");
},
...
});

CSRF protection always failing when trying to upload file with ajax

Few days before i learned that we can make file uploads with ajax. So i tried to build an app that uploads selected file when other parts of form being filled by user.
my app has two models:
class Post(models.Model):
image = models.ImageField(...)
title = ...
desc = ...
class TempImg(models.Model):
image = models.ImageField(...)
posted_by = ...
posted_at = ...
That form used to make a post, here you can see temp_image as hidden input:
class PostForm(forms.ModelForm):
temp_image = forms.IntegerField(widget=forms.HiddenInput)
class Meta:
model = Post
When user selects image, this javascript code uploads it and puts returning id value to temp_image field of form:
// here is a function that gets csrftoken, [which is taken from docs
// https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax
csrftoken = ...
form = new FormData();
form.append("image", dataURLToBlob(resizedImgData));
form.append("csrftoken", csrftoken)
$.ajax({
url: '/upload/',
data: form,
processData: false,
contentType: false,
dataType: 'json',
type: 'POST',
beforeSend: function() {
$("#uploadingIndicator").show()
},
success: function(data){
$("#id_temp_image").val(data['id'])
$("#uploadingIndicator").hide();
}
});
Everything seems OK to me but, there is a problem that my view always return 403. CSRF verification error.
Can anybody have an idea where should i look at? I am going to use csrf_exemt if i can not find solution...

You should use
form.append("csrfmiddlewaretoken", csrftoken)
While you were trying to do form.append("csrftoken", csrftoken)

JQuery $.ajax() post - data in a java servlet

I want to send data to a java servlet for processing. The data will have a variable length and be in key/value pairs:
{ A1984 : 1, A9873 : 5, A1674 : 2, A8724 : 1, A3574 : 3, A1165 : 5 }
The data doesn't need to be formated this way, it is just how I have it now.
var saveData = $.ajax({
type: "POST",
url: "someaction.do?action=saveData",
data: myDataVar.toString(),
dataType: "text",
success: function(resultData){
alert("Save Complete");
}
});
saveData.error(function() { alert("Something went wrong"); });
The $.ajax() function works fine as I do get an alert for "Save Complete". My dilemna is on the servlet. How do I retrieve the data? I tried to use a HashMap like this...
HashMap hm = new HashMap();
hm.putAll(request.getParameterMap());
...but hm turns out to be null which I am guessing means the .getParameterMap() isn't finding the key/value pairs. Where am I going wrong or what am I missing?

You don't want a string, you really want a JS map of key value pairs. E.g., change:
data: myDataVar.toString(),
with:
var myKeyVals = { A1984 : 1, A9873 : 5, A1674 : 2, A8724 : 1, A3574 : 3, A1165 : 5 }
var saveData = $.ajax({
type: 'POST',
url: "someaction.do?action=saveData",
data: myKeyVals,
dataType: "text",
success: function(resultData) { alert("Save Complete") }
});
saveData.error(function() { alert("Something went wrong"); });
jQuery understands key value pairs like that, it does NOT understand a big string. It passes it simply as a string.
UPDATE: Code fixed.

Simple method to sending data using java script and ajex call.
First right your form like this
<form id="frm_details" method="post" name="frm_details">
<input id="email" name="email" placeholder="Your Email id" type="text" />
<button class="subscribe-box__btn" type="submit">Need Assistance</button>
</form>
javascript logic target on form id #frm_details after sumbit
$(function(){
$("#frm_details").on("submit", function(event) {
event.preventDefault();
var formData = {
'email': $('input[name=email]').val() //for get email
};
console.log(formData);
$.ajax({
url: "/tsmisc/api/subscribe-newsletter",
type: "post",
data: formData,
success: function(d) {
alert(d);
}
});
});
})
General
Request URL:https://test.abc
Request Method:POST
Status Code:200
Remote Address:13.76.33.57:443
From Data
email:abc#invalid.ts

you can use ajax post as :
$.ajax({
url: "url",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ name: 'value1', email: 'value2' }),
success: function (result) {
// when call is sucessfull
},
error: function (err) {
// check the err for error details
}
}); // ajax call closing

For the time being I am going a different route than I previous stated. I changed the way I am formatting the data to:
&A2168=1&A1837=5&A8472=1&A1987=2
On the server side I am using getParameterNames() to place all the keys into an Enumerator and then iterating over the Enumerator and placing the keys and values into a HashMap. It looks something like this:
Enumeration keys = request.getParameterNames();
HashMap map = new HashMap();
String key = null;
while(keys.hasMoreElements()){
key = keys.nextElement().toString();
map.put(key, request.getParameter(key));
}

To get the value from the servlet from POST command, you can follow the approach as explained on this post by using request.getParameter(key) format which will return the value you want.

Posting user entered text using $.ajax, how to pass text content in the data property?

What options do I have for passing large text in a call to $.ajax(...)?
I have the content stored in a variable already:
articleText
So I have:
$.ajax(
type: "POST",
url: "/test/add_article",
dataType: "json",
data: ??????,
success: function(d) {
alert(d);
}
});
In the docs they show:
"p1=asdfasdf&p2=2sdfasdf"
Also:
data: ({someName: someValue })
I like the latter, so is the someValue where I put my variable?
What about encoding it or is it just like a form post where I can handle that on the server-side?
)

You would simply do data: { aT: articleText }. Then in your server-side script you can access that text as post variable aT...in PHP it would be: $_POST['aT'].
jQuery converts { aT: articleText } to "aT=myTextContentWouldBeHere".

Just change data to
data: {"someName": someValue}
if someValue is a variable, else
data: {"someName": "someValue"}
if someValue itself is the value.