Rest api get call using jquery

Question

I iam trying to consume rest api using jquery ajax, i am facing problem in doing that My api is http://183.11.23/Kapture/Service1.svc/LoginVerification/abc@outlook.com/123

My Html file

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

<script src="login.js"></script>

</head>
<body>
<div>
<form onsubmit="login()">
email:<input type="email" name="email" id="emailId"></br>
password:<input type="password" name="password" id="password">
<button type="submit" name="submit" >submit</button>
</form></div>
</body>
</html>

My js file is

function login(){

    var myusername = $("#emailId").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "http://183.11.23/Kapture/Service1.svc/LoginVerification/myusername /password",

      cache: false,
      success: function(data){
         $("#resultarea").text(data);
      }
    });
}

Please help me

`183.11.23` - no, that's not the IP-number of your service, it's invalid. Insert the real IP-number and try again. — Johannes Jander, Feb 19 '16 at 10:11
Cross domain cannot with jquery, buuuuttt: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain — online Thomas, Feb 19 '16 at 10:11
Hi @JohannesJander i have not given full url it is dummy for security reason — Sudhir, Feb 19 '16 at 10:12
@Thomas i have disabled web security, my question is this the right way to pass parameters — Sudhir, Feb 19 '16 at 10:13
So which problem are you facing? What is your question? What does not work? What would you expect and what actually happens? Which errors do you see? Kindly provide us details. — Johannes Jander, Feb 19 '16 at 10:14
@JohannesJander my question is this the right way to consume api for get method, How to pass email and password from html page to js file, i am trying this for first time — Sudhir, Feb 19 '16 at 10:18
`"http://183.11.23/Kapture/Service1.svc/LoginVerification/myusername /password"` - that's never going to work. You need to read up on how to set arguments on a jQuery GET request: https://api.jquery.com/jquery.get/ - `data` is what you need to transmit username/password. — Johannes Jander, Feb 19 '16 at 10:21
@JohannesJander i am not getting by using this type, can u help me how to pass — Sudhir, Feb 19 '16 at 10:26
Is the API set in stone or could it also react to `http://183.11.23/Kapture/Service1.svc/LoginVerification?username=abc@outlook.com&password=123` ? — Johannes Jander, Feb 19 '16 at 10:30
@JohannesJander api is like this http://183.82:8484/KaptureKountService/Service1.svc/LoginVerification/abc@outlook.com/123. for this api i will get output as {"LoginVerificationResult":[{"RoleID":1,"UserID":1,"UserName":"Mark"}]} — Sudhir, Feb 19 '16 at 10:32
Then you need to URL-encode the username and password and add them to the url via string concatenation. — Johannes Jander, Feb 19 '16 at 10:34
@JohannesJander ya thats what iam stuck with how to pass the html values to api — Sudhir, Feb 19 '16 at 10:35
Look, I am not going to write your code for you. See [here](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) how to URL-encode the parameters and after that, use the answer below but add the URL-encoded parameters instead of the un-encoded ones — Johannes Jander, Feb 19 '16 at 10:38
On a side note WHY is it a GET request if you are sending username and password ? should be a POST — Aukhan, Feb 19 '16 at 11:06

Uzair Khan · Answer 1 · 2016-02-19T10:52:33.067

0

You should update your service to use request parameters in it instead of passing them in a 'username/password' way You can them pass them as parameters in your url in your function, although this is not the best way, but you haven't posted your service method which you should for a better approach for this

"http://183.11.23/Kapture/Service1.svc/LoginVerification?username=someuser&password=somepassword"

Javascript :

function login(){

    var myusername = $("#emailId").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "http://183.11.23/Kapture/Service1.svc/LoginVerification?username=" + myusername +"&password="+password,

      cache: false,
      success: function(data){
         $("#resultarea").text(data);
      }
    });
}

and on backend you should have something like

  String username = Request.Querystring["username"];
  String password = Request.Querystring["password"];

edited Feb 19 '16 at 10:52

answered Feb 19 '16 at 10:47

Uzair Khan

67
9

That's a bad way to do it, it will not escape things like `/` – Johannes Jander Feb 19 '16 at 10:52
i dont understand, if the username contains "some/username" wont this be passed as it is through querystring? – Uzair Khan Feb 19 '16 at 11:00
1

if you set a json value in the data property of the ajax call ... doesnt jQuery encode the key value pairs for you in the url, in case of a GET request that is ? – Aukhan Feb 19 '16 at 11:03

Rest api get call using jquery

1 Answers1