Pass the pre-encoded value through Ajax

Is there a way to prevent AJAX from encoding an already encoded value when passing it through data? I'm facing this issue where my value gets further encoded. Any solutions?

This is the AJAX code I'm using:

    $.ajax({
        url: form.attr("action"),
        data: {
            'at': ajax_params['at'],
        },
        type: form.attr("method"),
        success: function (data) {
            alert('Success');
        }
    });

The value in ajax_params['at'] = 2%2C+4

In this value, 2 and 4 represent numbers, %2C represents a comma, and + represents a space. The value can contain multiple commas.

After submitting with AJAX, the current output becomes:

at=2%252C%2B4

The expected output should be:

at=2%2C+4

Answer №1

To set the data, you have two options. You can either use a string like this:

data: "at=" + ajax_params['at'],

Alternatively, you can decode it first to prevent double-encoding when it's encoded again:

data: {
    'at': decodeURIComponent(ajax_params['at'])
},

Just a quick note: You don't need to use brackets or quotes for the property at. This applies both within the object literal and when accessing it from ajax_params:

data: {
    at: decodeURIComponent(ajax_params.at)
},

The keyword at is not a reserved word in JavaScript. Even if it were, starting from ES5 (back in 2009), unquoted keywords could be used in property creation and access expressions.

Answer №2

Please ensure it is decoded prior to transmission

information: {
  info: decodeURIComponent(ajax_params['info'])
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring information through AJAX and fetching through PHP

Below is my current AJAX code setup: optionScope.data().stage = 'b'; $.ajax({ url: "functions/contact.php", type: "post", data: {'stage': optionScope.data().stage}, success: function(data, status) { ...

The issue of drop shadows causing links to not work properly in Internet Explorer

I am currently working on a website design that features a fixed menu positioned behind the body. When the menu icon is clicked, some jQuery code shifts the body to the left. To create the effect of the fixed menu being positioned underneath, I have added ...

Performing a function multiple times by clicking the mouse

I have a function called week(), which provides me with the current first (startDate) and last (endDate) day of the week along with the week number. Additionally, there are two other functions, namely weekPlus() and weekMinus(), containing variables that i ...

Synchronizing timers among different elements

Just a little context: I'm diving into the world of React and currently working on a small app using next.js (with a template from a tutorial I followed some time ago). Lately, I've encountered a challenge where I need to synchronize a timer betw ...

Guide for ordering a query by the most recent updatedAt within a nested one to many relationship

I'm dealing with a set of interconnected entities structured as follows: Entity1 -> Entity2 -> Entity3 (illustrating one-to-many relationships with arrows) I am utilizing MikroORM for this purpose. Is there a way to construct a findAndCount q ...

React Switch not displaying various pages correctly

After creating a new component to switch between pages on my React app, I encountered an issue where the HomePage renders correctly when entering the site, but clicking on navlinks does not work. Additionally, when trying to access the url /contacto, ins ...

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200

Having recently delved into Angular, I successfully completed the development of my angular web application. While using ng serve for production, everything ran smoothly. However, after incorporating angular universal and attempting npm run dev:ssr or np ...

The function "xml find" does not exist

After successfully running the following ajax call, I encounter an issue: $.ajax({ url: "services/orders/<%=OrderServices.Action.BULK_SUPPLIER_DISCOUNT%>", data: params, complete: function(xhr) { i ...

Encase a group of child elements within a parent container using

Currently, I am able to wrap an entire li-element in an ordered list with a link: $(e).wrap('<a href="#" onclick="window.open(\'/xyz/\');return false;"></a>'); This is the HTML construct: <li class=""> ...

Sending data to a MySQL database using AJAX with PHP

While attempting to use ajax to insert a value in PHP, I am encountering an issue where the data is not getting inserted into the database. The code snippet I am using was sourced from answers provided on this site. Can someone please point out where I m ...

How can I simply show a specific value from an object in Vue?

I've created a Vue application that filters messages and displays them on a page. Currently, when a user selects a message from the list, the entire JSON data associated with that message is shown on the page. However, I want to only display a specifi ...

Failure to send Websocket connection

Currently working on PHP, here's a snippet: $room_array = array(); $room_array[0] = 'room-list'; $room_array['info'] = array('room_name' => $room['room_name'], 'owner' => $username['usernam ...

Download a file on button click using JavaScript with data extracted from the DOM

I am looking to create a download feature where a user can click a button on the webpage, triggering a JavaScript method to capture the contents of a DOM element and prompt the user for a download. After successfully capturing the DOM element in a JavaScr ...

Is using .htaccess a reliable method for securing a specific file on the server?

Running a classifieds website comes with its own set of challenges, one being the need for an administrator to have the ability to remove classifieds at their discretion. To address this issue, I have developed a simple function that allows me to specify t ...

Is there a way to properly structure the json data displayed in my network tab on Chrome?

After sending an http request to my backend, I received a json response in the network tab. However, the format of the json is unreadable. To clarify, here is a screenshot: https://i.stack.imgur.com/RBiTd.png Currently using Chrome, I am seeking assistanc ...

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

Extract information from a JSON string and present it on the screen

I am a complete novice when it comes to D3 (with very little experience in JS). Here are the lines of code I am working with: <script type='text/javascript'> data ='{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16. ...

Converting line breaks into a visible string format within Angular

After thorough research, all I've come across are solutions that demonstrate how to display the newline character as a new line. I specifically aim to exhibit the "\n" as a string within an Angular view. It appears that Angular disrega ...

Why is my Ajax call not working properly? Does axios not support cross-origin requests?

When utilizing axios to make an ajax call with a promise, we encountered the following error: Failed to load xxx: Redirect from xxx to yyyy has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested reso ...

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...