CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Razorocean
Razorocean

Reputation: 398

Getting an html file through ajax with data parameter in target html

 var testAjax = {
  init: function(){
    $('#query').on('click', '#starter', this.loadAjax);
  },

  loadAjax: function (){
    $.ajax('ajax/workOne.html', {
      success: function(response){
        $('#answer').children('h3').html(response);
      },
      data: {
        'confTot': 5678
      }
    });
  }
};

testAjax.init();

So I have this refactored ajax code, and I have a file in the ./ajax/ folder called 'workOne.html?confTot=5678' so that I could pull it in with this ajax code. But when I run the code in Chrome DevTools, the ajax call is unable to GET the html file 'ajax/workOne.html?confTot=5678' even though I do have this file in the ajax folder with the appropriate and identical name. How would I be able to access the particular html I'm interested in. Thank you for your expertise in advance!

Upvotes: 0

Views: 87

Answers (1)

StriplingWarrior
StriplingWarrior

Reputation: 156504

Most web servers expect to treat query parameters (everything after the "?") as dynamic information that would be consumed by a web application. For the purpose of static resources (like html files), they just ignore everything after the question mark.

In other words, your web server is probably looking to serve up a file called workOne.html, and not finding it. Because you're dealing with static resources rather than dynamic ones, I'd recommend you forget about trying to add data dynamically with jQuery, and just use URL paths and file structures that include the number. For example, put your html in ./ajax/workOne/5678.html and say:

  loadAjax: function (){
    $.ajax('ajax/workOne/5678.html', {
      success: function(response){
        $('#answer').children('h3').html(response);
      }
    });
  }

Upvotes: 1

Related Questions