I've been stuck from this issue in couple of days. I want to send some headers data in jQuery.load(). It seems that jQuery.load never send the headers, like ajax. Can somebody explain how to, or Is it necessary? Btw, sory my bad English.

This is the syntax :

$loadingBay.load(href, settings.data, function (data, status) {
    prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents());
});

Many Thanks

I've been stuck from this issue in couple of days. I want to send some headers data in jQuery.load(). It seems that jQuery.load never send the headers, like ajax. Can somebody explain how to, or Is it necessary? Btw, sory my bad English.

This is the syntax :

$loadingBay.load(href, settings.data, function (data, status) {
    prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents());
});

Many Thanks

• javascript
• jquery
• ajax

• 1 I think you need to use the plain ajax function. ($.ajax) – Royi Namir Commented Nov 19, 2013 at 8:55
• 2 What is the issue with $.ajax() is this can't do the job you want to do with .load()? – Jai Commented Nov 19, 2013 at 8:56
• I have tried, and it was unsuccessfull. The syntax is bellow : $loadingBay.load(href, settings.data, function (data, status) { prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents()); }); – Rocky Andra Commented Nov 19, 2013 at 8:57
• .load() is a wrapper for .get(), .get() is a wrapper for .ajax(). You can recreate load with the .ajax() method and then add the headers – Liam Commented Nov 19, 2013 at 9:01
• possible duplicate of How can I add a custom HTTP header to ajax request with js or jQuery? – Liam Commented Nov 19, 2013 at 9:02

2 Answers 2

You can not pass headers data to $.load() , but you can set default setup using $.ajaxSetup() like this :

$.ajaxSetup({
    'headers':{
        'header1':'value1',
        'header2':'value2',
    }
}
);

//give the load call here
$('selector').load('url',function(){
    //do things
})

Disclaimer From jquery doc:

Its use is not recommended.

The best way is do the is thing using $.ajax() :

$.ajax({
  url: "test.html",
  headers : {header1 : "header1"}       
  }).done(function(data) {
     $('selector').html(data);
});

You can use beforeSend option in jquery ajax , like as follows :

$.ajax({
    url: "http://localhost/restTest",
    data: { uname: "asdf" },
    type: "GET",
    beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
    success: function() { alert('Success!' + authHeader); }
});

or can also use headers like,

$.ajax({
    url: "http://localhost/restTest",
    data: { uname: "asdf" },
    type: "GET",
    headers:{ "X-TOKEN": 'xxxxx'},
    success: function() { alert('Success!' + authHeader); }
});