What is the process of encoding a String in AngularJS?

Utilizing Angularjs for sending a GET HTTP request to the server, which is then responded to by the Spring MVC framework. Below is a snippet of code depicting how the URL is built in Angular:

var name = "myname";
var query= "wo?d";
var url = "/search/"+query+"/"+name;

Here's the Spring MVC Controller implementation:

@RequestMapping( value = "/search/{query}/{name}" , method = RequestMethod.GET , produces = MediaType.APPLICATION_JSON_VALUE )
@ResponseBody
public List<Data> search() {

    // search logic

return data;
}

An issue arises when the query string contains a question mark character (?), causing the URL to be split and leading to a warning from Spring:

WARN o.s.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/my-server/web/search/wo in DispatcherServlet with name 'mvc'

This occurs because the question mark introduces the beginning of request parameters. Attempts to use encodeURI(query) in JavaScript have been unsuccessful as the question mark is not encoded. How can we properly encode a question mark in the URL?

Answer №1

In Javascript, there is a special function designed specifically for this task known as encodeURIComponent

The encodeURIComponent function escapes all characters except for the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

Additionally, the encodeURI function also excludes encoding of characters such as ; , / ? : @ & = + $ #

Answer №2

Utilize encodeURIComponent to achieve that.

Refer to this fiddle for more information.

var a = "wo?d";
alert(encodeURIComponent(a));

If you need help with Angular specifics, check out this SO answer.

If you are still facing issues, feel free to reach out to me.

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

Installing material-ui using npm does not always result in getting the most up-to-date version

I'm currently facing a dilemma with an abandoned project that serves as the admin tool for my current project. The Material-UI version used in this project is 0.19.4. However, when I remove the dependency from my package.json file and execute npm inst ...

Guide to selecting multiple rows at once using ng-options in a list

Need assistance with an HTML list: I have a box displaying a list where users can select multiple items to save. The saving and retrieving process is functional as the selectedList stores the user's previous selections, while fullList contains all av ...

Determining the element type that was clicked using Angular

Is there a way in Angular to determine the type of element that was clicked? I have successfully implemented this functionality using jQuery, but I'm unsure how to achieve the same outcome in an Angular project. // Click action $(".contactlist").on(" ...

How can we avoid multiple taps on Ext.Button in Sencha Touch?

Currently working on a Sencha Touch game, but struggling with users tapping buttons multiple times. Looking for a simple solution to prevent multiple tap events in the app.js file so that only one tap event is executed even if a user taps or presses for an ...

What is preventing me from accessing the variable?

Having some trouble using a variable from JSON in another function. Can someone lend a hand? async function fetchData() { let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d'); let data = await response.js ...

Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side. This is essentially what I have in m ...

What is the best way to display data retrieved through Ajax, jQuery, and JavaScript on an HTML page

I have successfully used the script below to fetch data from an api endpoint and populate my charts. Now, I want not only to display the data in my charts but also directly output it in my HTML code using something like the document.write() function. How ...

Updating parent controllers in Angular 1.5 components via ngRoute

I'm currently utilizing ngRoute to develop an Angular single-page application and now I aim to transition to a component-based version. The challenge lies in isolated scopes. I require access to the main controller's properties and methods. Desp ...

What is the best way to showcase an ajax response on an HTML webpage?

Apologies for the length of the code, but I'm looking to condense it while maintaining the same functionality. Is there an alternative approach or method that could achieve the same results? I receive data from PHP, which is then passed to JavaScript ...

Incorporating Material-UI with React Searchkit for a seamless user experience, featuring

I encountered an issue when trying to use both searchkit and material-ui in my React application. The problem arises from the fact that these two libraries require different versions of reactjs. Initially, everything was working fine with just searchkit in ...

Finding the scope of dynamically generated fields in AngularJS has proven to be quite challenging

I'm currently working on creating a dynamic form where users can add input fields by clicking a button. However, I am facing issues with fetching the value of the input field in the controller. Below is my form: <div ng-repeat="skill in skill_set" ...

How to expand a multidimensional array in Java by adding another element?

Looking for assistance with a method in Java that returns a 2-dimensional array. I need to add an additional element to the array but unsure of the correct syntax to copy it to a new 2-d array and include the extra element. Anyone familiar with this proces ...

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

Implementing html5mode in Express.js and Angular.js for cleaner URLs

I've been working on resolving the issue of avoiding # in my Angular app with an ExpressJS server-side setup. I found a solution to enable html5mode and it worked well. However, whenever there is another 'get' request to fetch data from a di ...

Access account using lightbox effect for the login form

In my simple CSS code, I have used a litebox view. I removed unnecessary CSS properties to keep it clean: <style> .black_overlay{ display: block; } .white_content { display: block; } < ...

Unable to access the attributes of the mongoose model

I'm experiencing an issue with my mongoose model.find code below Displayed here is my node.js code that utilizes mongoose to interact with MongoDB. However, upon running it, I encounter the following error message: Starting... (node:7863) Unhandl ...

React Alert Remove Alert: Each item in a list must be assigned a distinct "identifier" prop

How can I resolve the React warning about needing a unique "key" prop for each child in a list? I'm trying to eliminate the warning that says: "Each child in a list should have a unique key prop." The code snippet causing this warning is shown below ...

Achieving sequential actions in Javascript without the need for state updates

One aspect of jQuery that I find impressive is its ability to chain methods like .animate() and .css(). This is made possible by utilizing the special variable "this" in the backend code. I am interested in implementing a similar method chaining mechanism ...

Transitioning from one CSS id to another during page loading

Wondering how to fade in one CSS id on page load and then smoothly transition to another after a few seconds? Here are the ids: #background { background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed; background-size: 100%; ...

Strategies for Handling Errors within Observable Subscriptions in Angular

While working with code from themes written in the latest Angular versions and doing research online, I've noticed that many developers neglect error handling when it comes to subscription. My question is: When is it necessary to handle errors in an ...