Question

.ajax() can send a post request and get data in return where as .load() can get any element in the rendered page. How to create a form when submitted(asynchromously) instead of getting back some data should get the page element of the rendered page that would be generated had there been normal submission instead of ajax submission?

I dont want to write views(Django) for xhr, normal requests separately. So, When I submit a form by ajax I dont want to hijack default action but only want to get some element of the rendered post submission page instead of actually being redirected to that post submission page which would have happened hadn’t it been an xhr request.

Answer 1

Update:

load will do a POST rather than a GET if you supply the data to send as an object rather than a string. From the docs:

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

So:

$("#target").load("/path/to/resource selector_for_relevant_elements", {});

..should convert the load from GET to POST. Of course, you’d replace {} with the arguments you want to send.

---

Original answer:

You can do the POST directly with ajax and then process the returned HTML yourself. For instance, to turn this load:

$("#target").load("/path/to/resource selector_for_relevant_elements");

..into a POST:

$.ajax({
    url: "/path/to/resource",
    method: "POST",
    dataType: "html",
    success: function(html) {
        // Build the elemnts of the result in a disconnected document
        var page = $("<div>").append(html); // See note below

        // Find the relevant elements and put them in target
        $("#target").html(page.find("selector_for_relevant_elements"));
    }
});

I’ve done the wrapper div because that’s what jQuery’s load function does. You may want to look at the source for load (that line number will rot, of course, but the filename is unlikely to change) to see if there are other tricks you need to replicate.