CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-3post
Brenton Pierce
Brenton Pierce

Reputation: 163

Ajax Post to Controller Action Cross domain

I have a form on "website A" which posts to "website B". Code included Below.

I can't get a success or a return message from my destination domain.

Any suggestions? what am I doing wrong?

<script type="text/javascript">

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

$(document).ready(function(){
    $("#submit").bind("click", function(){

        //turn form into json
        var formData = $("#digForm").serializeObject();
        var jsonData = JSON.stringify(formData);


        alert(jsonData);

        $.ajax({
            url: URL,
            data: jsonData,
            dataType: 'jsonp',
            cache: false,
            success: function (data) {
                alert(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                                alert(errorThrown);
                            }
        });
    })
});
</script>

Here is the controller:

[HttpPost]
public ActionResult Index(string submission)
{
    SubmissionModel model = new SubmissionModel();

    //validate everything we need is here
    var serializer = new JavaScriptSerializer();

    // get json data from url
    var json =  submission;
    var submissionData = serializer.Deserialize<SubmissionModel>(json);

    model.SiteID = submissionData.SiteID;
    model.FirstName = submissionData.FirstName;
    model.LastName = submissionData.LastName;
    model.Email = submissionData.Email;
    model.Comments = submissionData.Comments;
    model.Like = submissionData.Like;
    model.Dislike = submissionData.Dislike;
    model.SubmitDate = DateTime.Now;
    db.Submissions.Add(model);
    db.SaveChanges();

    return View();
}

Upvotes: 2

Views: 1679

Answers (3)

Brenton Pierce
Brenton Pierce

Reputation: 163

Needed to do it like this:

$.ajax({
    url: URL,
    data: {submission: jsonData},
    dataType: 'jsonp',
    cache: false,
    success: function (data) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

Upvotes: 1

Ilan lewin
Ilan lewin

Reputation: 1639

I ran into similar problems in the past.

With the risk of teaching grandma to suck eggs....

First, regarding the diagnosis of the problem I am pretty sure this IS a same-origin-policy problem, because these result is not getting a success or error message, which is very typical. What you COULD to in order to diagnose it, is to use firebug on firefox, and look at the http requests/responses themselves. Over there you WILL see the response, because this is before it is being filtered out by the browser.

Regarding the solution.

Like Anthony said, you CAN use jsonp. JsonP is actually a hack that works around the same-origin-policy by hiding the data as if it was a JS function.

I usually use getJson instead of ajax() for that. http://api.jquery.com/jQuery.getJSON/

And I set it to use jsonp manually, by adding "callback=AnyName" to the post parameters.

Also, I cannot see your server B's response code, but the json data needs to be encapsulated with AnyName(); so if your json data is {json, data}, your response should be AnyName({json,data});

Upvotes: 0

Renaissance
Renaissance

Reputation: 792

you are using json but for cross browser ajax posts you should be using jsonp

http://forums.asp.net/t/1780255.aspx/1

Upvotes: 1

Related Questions