The phenomenon of jQuery AJAX converting the escape character from %20 to + has been observed

I am encountering an issue with my jQuery AJAX function which is supposed to save an image path to the database. Below is an example parameter:

var data = {};
data['url'] = "Path%20to%20URL";

Normally, if there is a space or %20, it should be saved as "Path%20to%20URL" in the database. However, without making any changes to my code, it is now being saved as "Path+to+URL". I'm trying to figure out what could be causing this unexpected behavior.

I attempted to use

str.replaceAll('+', '%20')

in my code just in case the issue was caused by some other function, but unfortunately, it did not resolve the problem.

Below is how my jQuery AJAX function looks like:

$.ajax({
      url: `server-url`,
      type: 'PUT',
      headers: {
        //auth keys
        'Content-Type': 'application/json'
      },
      data: JSON.stringify(data),
      success: () => {
javascriptajaxurlencodestringescapeutils

Answer №1

"URL%20to%20Path" is the encoded form of a URL in HTML. To decode it, you can utilize the decodeURI() function.

var info = {};

info['path'] = "URL%20to%20Path";
console.log(decodeURI(info['path']));

//"URL to Path"

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

Utilizing jQuery and AJAX for submitting multiple POST requests

Experiencing a problem with posting data via AJAX using a drag and drop interface. The data is being sent to the POST URL as intended, but there's a recurring issue where the POST request occurs twice, causing the processing URL to handle the data aga ...

javascriptjqueryajaxdrag-and-drop

Execute PHP function through Ajax

I have a button in my HTML code that looks like this: <button class="uk-button uk-button-primary uk-modal-close confirm-rules" type="button" onclick="sendStatus('accept_rules')">Rozumiem</button> When I click on the button, I want t ...

phpajaxoopcookies

What is the best way to capture a 403 response when making a GraphQL API call?

My server handles component rendering and generates an HTML response upon request. During the rendering process, the server initiates a GraphQL call for a specific component which sometimes results in a 403 error. Here is the code snippet: const client = ...

javascriptnode.jsreactjsexpressgraphql

Ways to dynamically change the textbox value without having to refresh the page by utilizing AJAX in MVC

I am looking to update the value of a textbox from a database without refreshing the page. I have attempted to do so using AJAX, and while it updates the value without a page refresh, it is not correctly binding to the textbox. My Controller public A ...

jqueryjsonajaxasp.net-mvcasp.net-mvc-4

Utilize ng-checked in AngularJS to bind all values from an array to checkboxes

I'm working on a project where I need to bind the name and age of a person using checkboxes, with the data looped through ng-repeat. However, I seem to be able to only get the "name" from the array, not the "age". Can someone please help me find my mi ...

javascripthtmlangularjsangularjs-scope

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object. export const colors = [ { colorVariable: "$ui-background" }, { colorVariable: "$ui-01" }, { colorVariable: "$ui-02" }, ... ] The Object above is derived from a scss file whic ...

javascriptcssreactjsscss-mixinsreact-16

Tips for transforming JSO into JSON data format

Here is an example: var info = [{"name":"john","age":"30"},{"name":"smith","age":"28"}] I am looking to convert the above json object to a format like this result: [{name:"john",age:30},{name:"smith",age:28}] Any suggestions on how to achieve this? ...

javascriptjson

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

I am currently working on a project using threejs version 106, where I have integrated both the webGLRenderer and CSS2DRenderer. My main challenge lies in loading a glb model and displaying a loading progress bar utilizing the onProgress callback of the l ...

javascriptthree.jsloadergltf

Angularjs scope throws TypeError when attempting to add an array

As someone diving into the world of Angular and JavaScript, I am tackling the challenge of creating a directive that requires adding an array to the directive's scope. Here's a snippet of the code for my directive: .directive("startupSections", ...

javascriptangularjs

Retrieving information from a local JSON file in Vue.js using the jQuery $.getJSON() method

Currently, I am in the process of developing a demo application using Vuejs which involves extracting map data from a local .json file. The extracted data is then used to obtain specific information like latitude and longitude values that are necessary for ...

javascriptjqueryjsonvuejs2vue-component

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

javascriptjqueryhtmlcss

Having difficulties retrieving JSON data

I'm encountering an issue while trying to retrieve my JSON data using an AJAX request. JSON { "Ongoing": [ {"name": "meh"}, {"name": "hem"} ], "Completed": [ {"name": "kfg"}, {"name": "dkfgd"} ] } ...

javascriptjqueryajaxjson

Selecting Dates with Drop-down Menus

I need some guidance with JavaScript and Ajax. Can you recommend a beginner-friendly tutorial site for both? The task I'm working on is quite straightforward. There are three drop-down menus for selecting a date: year, month, and day. The user choose ...

ajaxdatedrop-down-menu

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

javascriptjqueryhtmlangularjs

What methods can be used to report errors with Sentry while offline?

One key feature of my app is its ability to function both offline and online. However, I'm wondering how I can ensure that errors are still sent to my Sentry dashboard even when a user is offline. ...

javascriptnode.jssentry

Finding the Biggest Number in an Array

I've come up with a solution using Math.max(), but I'm curious why the following approach isn't working. array = [4, 5, 1, 3] for (var i = 0; i < array.length; i++) { var num = 0; if (array[i] > num) { num = array[i]; } } ...

javascriptarrays

Can you provide guidance on securing a REST API using Google authentication?

I'm currently working on developing a REST API using NodeJS and Passport for a single-page JavaScript application. I am struggling to find the right approach to securing my REST API with Google OAuth. Can someone guide me on how to achieve this? Any ...

javascriptnode.jsgoogle-oauthpassport.jssingle-page-application

Angular 7: Resetting multiple dynamically generated checkboxes back to their original state with the click of a button

I have created a child component that contains 3 checkboxes, generated dynamically using ngFor, along with Apply and Cancel buttons. In the parent template, I include the selector tag for the child component. The parent component accesses this child compo ...

javascriptangulartypescriptcheckboxangular7

What purpose does sending null to XMLHttpRequest.send serve?

Have you ever wondered why send is often called like this? xhr.send(null) instead of just xhr.send() ? W3, MDN, and MSDN all mention that the argument is optional. Additionally, the ActiveX control seems to work without it: hr=pIXMLHTTPRequest.Create ...

javascriptajax

I want to utilize an Ajax/JQuery filled dropdown to dynamically alter the user interface without the need for additional server-side requests

I am working on a feature where an AJAX post method populates a dropdown with object descriptions. But, I also need to update a textbox with the selected ID when changing the selection, without making another AJAX call. Here's the relevant code snipp ...

jqueryasp.netajax