0

So currently, when my webapp makes a get request, the uri looks something like this:

users?usderId=123

What I want is

users/123

How do I do this?

Googling how to make get request in javascript gives me the former URI when I want the latter.

The reason I want the latter format is because my requestMapping in Spring looks like

@RequestMapping(value = "/users/{userId}", method = RequestMethod.GET)

Edit:

So I have tried the method in the reply and it seems like my javascript function was never being called.

<form id="idForm" class="form-inline" role="form" action="/users">
                <div class="form-group">
                    <div class="input-group inline-input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle fixedWidth225" data-toggle="dropdown">User Id<span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">aaa ID</a></li>
                                <li><a href="#">bbb ID</a></li>
                                <li><a href="#">ccc ID</a></li>
                                <li><a href="#">ddd ID</a></li>
                            </ul>
                        </div>
                        <label class="sr-only" for="EntityId">Entity Id</label> 
                        <input type="text" class="form-control fixedWidth225" name="userId">
                    </div>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <div id="displayDiv">
            </div>

This is my form and this is js:

$(document).ready(function() {
    document.getElementbyID("idForm").submit(function(event) {
        event.preventDefault();
        var url = document.getElementbyID("idForm").attr( "action") + "/" + document.getElementbyID("userId").val(); 
        httpGet(url);
    });
  });
  */

function httpGet(restURL)
{
    var xmlHttp = null;

    // Assuming its a text field
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", restURL, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

Why is my javascript function for idForm submit not being called?

---------------------------The part just above this line is figured ----------------------

Edit:

The bottom line of my question:

HTML form with submit button can make a get request with "action" specified for form and "name" specified for the input text. I just want to be able to format the URI this get request generates from users?userID=123 to users/123.

There must be a way to simply change the format of the URI, mustn't it?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
whiteSkar
  • 1,614
  • 2
  • 17
  • 30

2 Answers2

1

Referring the Question 

function httpGet(restURL)
{
    var xmlHttp = null;
    restURL=restURL+"/"+document.getElementbyID("usderId").val(); 

    // Assuming its a text field
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}
Community
  • 1
  • 1
user1428716
  • 2,078
  • 2
  • 18
  • 37
  • Thank you for your response. I was trying out this method and it seems like my javascript method is never being called. can you have a look at my edited post? – whiteSkar Jun 12 '14 at 18:38
1

It is probably because of the syntax error: */, and because HTML DOM is not jQuery, so there is not such method as form.submit(callback) and .attr() and .val(), etc... You should use jQuery, or read the HTML DOM manual.

inf3rno
  • 24,976
  • 11
  • 115
  • 197
  • You are right. I fixed Dom and jQuery method issues. Now when I submit, it makes a Get request with the correct format of URI I want. However, now the page doesn't get loaded. Before, when the get request gets a page, it would load the new page received from the server. However, now the get methods succeeds but it does not load the page it received. Do you know why? – whiteSkar Jun 12 '14 at 18:55
  • You don't do anything with the response which is returned by `httpGet(url);`. You should use asnyc XHR instead of sync, and if you use jQuery, then use the [`.ajax()`](http://api.jquery.com/jquery.ajax/) instead of instantiating the `XMLHttpRequest` manually. – inf3rno Jun 12 '14 at 18:58
  • Is there no way to make a get request using the format of URI I want but with the original process? What I mean by original process is that, originally my webapp would make a get request by actually changing the URL of the page and loading to the new page. However, right now, it makes the get request in the background without changing the URL of the page. – whiteSkar Jun 12 '14 at 19:02
  • manipulating the history is the only way? Like, originally with very simple code, HTML form with submit button would make a get request with correct "action" for form and "name" for input text. I just want a way to simply change the format of URI this get request makes. – whiteSkar Jun 12 '14 at 19:05
  • https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history – inf3rno Jun 12 '14 at 19:09