extracting URL parameters using AJAX

Question

extracting URL parameters using AJAX

I have successfully created an AJAX request using the GET method, passing variables to the URL and receiving a response. Now, I need to retrieve the current URL variables by clicking on a newly created button in order to proceed with further processing. These variables are not visible in the browser's address bar but are included in the AJAX request URL. How can I access these variables upon button click?

View the screenshot

 function pagi_ajax(records_per_page){

 var data = 'action=' + 'testing_ajax' + '&records_per_page=' + records_per_page;

    var url_string = window.location.href;
    console.log(url_string);

 $.ajax({
     url: "ajax_pagi.php",
     dataType: "json",
     type: "get",         
     data: data, 

success: function (result) {

    }
  });
}

<a href="javascript:void(0)" onclick="pagi_ajax(records_per_page);">Next</a>
<button class="pagi_button" onclick="pagi_ajax( <?php echo $records_per_page; ?>, 
 <?php echo $rec_limit[$i]; ?>, 
 <?php echo $total_records; ?>)"> <?php echo $i+1; ?> </button>

javascript ajax url get

Answer 1

Answer №1

If you already have the variables, such as "records_per_page," which is used to create the url, you can easily pass it to another function. Simply add a function call within your success callback and pass the necessary variables.

function pagi_ajax(records_per_page){

    var data = 'action=' + 'testing_ajax' + '&records_per_page=' + records_per_page;

    var url_string = window.location.href;
    console.log(url_string);

    $.ajax({
         url: "ajax_pagi.php",
         dataType: "json",
         type: "get",         
         data: data, 

    success: function (result, records_per_page) {
        // Your code here
        console.log(records_per_page)
        }
});

Answer 2

If you already have the variables, such as "records_per_page," which is used to create the url, you can easily pass it to another function. Simply add a function call within your success callback and pass the necessary variables.

function pagi_ajax(records_per_page){

    var data = 'action=' + 'testing_ajax' + '&records_per_page=' + records_per_page;

    var url_string = window.location.href;
    console.log(url_string);

    $.ajax({
         url: "ajax_pagi.php",
         dataType: "json",
         type: "get",         
         data: data, 

    success: function (result, records_per_page) {
        // Your code here
        console.log(records_per_page)
        }
});

Answer 3

Answer №2

Although the current page's URL can be accessed using the location object, there is currently no standardized API for retrieving URLs used in HTTP requests made with XMLHttpRequest.

If you require this information, it will need to be stored manually somewhere.

In this particular scenario, it seems that the necessary data is already saved in the global variable records_per_page. Therefore, utilize that information accordingly.

Answer 4

Although the current page's URL can be accessed using the location object, there is currently no standardized API for retrieving URLs used in HTTP requests made with XMLHttpRequest.

If you require this information, it will need to be stored manually somewhere.

In this particular scenario, it seems that the necessary data is already saved in the global variable records_per_page. Therefore, utilize that information accordingly.

Answer 5

Answer №3

It is common practice to define certain variables like recordPerPage as constants and store them in a specific location. If not, you can cache this variable within the pagi_ajax function and retrieve it when needed.

One way to cache this variable is through a service, as shown below:

  pagingInfo = (function(){
    var info = {
      recordsPerPage: 10
    } 
    var get = function(){
      return info;
    }
    var setrecordsPerPage = function(value){
      info.recordsPerPage = value;
    }
    return {
      get: get,
      setrecordsPerPage: setrecordsPerPage
    }
  })()

  function pagi_ajax(records_per_page){
    pagingInfo.setrecordsPerPage(records_per_page);
  }

  function handleClick(){
    var recordsPerPage = pagingInfo.get().recordsPerPage
  }

Answer 6

It is common practice to define certain variables like recordPerPage as constants and store them in a specific location. If not, you can cache this variable within the pagi_ajax function and retrieve it when needed.

One way to cache this variable is through a service, as shown below:

  pagingInfo = (function(){
    var info = {
      recordsPerPage: 10
    } 
    var get = function(){
      return info;
    }
    var setrecordsPerPage = function(value){
      info.recordsPerPage = value;
    }
    return {
      get: get,
      setrecordsPerPage: setrecordsPerPage
    }
  })()

  function pagi_ajax(records_per_page){
    pagingInfo.setrecordsPerPage(records_per_page);
  }

  function handleClick(){
    var recordsPerPage = pagingInfo.get().recordsPerPage
  }

extracting URL parameters using AJAX

Answer №1

Answer №2

Answer №3

Similar questions

Validating complex ASP.NET MVC objects using AngularJS

Troubleshooting Problem with ListItem Alignment in Material UI v0 involving Custom Avatar Component

Deciding between Bull queue and Database Triggers

Observing the timepiece malfunctioning beyond expectations

`How can you adjust the language preferences for users in Meteor?`

Comparing two inherited classes in Typescript: A step-by-step guide

Aggregate X and Y values based on a key in a scatter plot using dc.js

VueJS allows for seamless image uploading using either a gallery of images or input files

Error in saving webpage as HTML

Is there a method to determine if localForage/indexedDb is currently handling data operations?

An error popped up: "argument list is missing) after"

Having trouble sending a function as a prop to a child component in React

When JSON data is displayed in an HTML table, it mysteriously duplicates

problem encountered when loading an HTML file within another HTML file using AJAX

Utilize the lodash times method for indexing

No content found in jQuery .text() values within iframe

Out-of-sync movement in animated characters

Adjust the body class dynamically based on the URL in AngularJS

Result of a callback function

Error detected in Deno project's tsconfig.json file, spreading into other project files - yet code executes without issues?