How to call a webservice method from an html page [javascript] with out refresh the page

Question

I have a webservice which will return a value. Here my requirement is, I need to call that webservice from an index.html page, that page have an html submit button. On that button click I am calling a JavaScript. From there I want to call the web method. how can I achieve this.

My webservice is "localhost/ws/service.asmx"; and web method is HelloWorld

 <input type="button" value="Submit" id="btn_submit" onclick ="return fun()">

 function fun() {


    // here  I want to call the "helloworld" method.
    return true;
}

Solution 1

Use jQuery for performin POST or GET request from your html page like this :

function fun() 
{
   var data="hello";
   $.get("http://localhost/ws/service.asmx/HelloWord", function(response) {
        data = response;
   }).error(function(){
  alert("Sorry could not proceed");
});

   return data;
}

OR :

function fun() 
{
  var data="hello";
  $.post('http://localhost/ws/service.asmx/HelloWord',{},function(response) 
  {     data = response;
  }).error(function(){
  alert("Sorry could not proceed");
});

    return data;
}

Solution 2

You can send ajax request to a webservice

 $.ajax({
            url: "WebServiceURL",
            data: "", //ur data to be sent to server
            contentType: "application/json; charset=utf-8", 
            type: "GET",
            success: function (data) {
               alert(data);
            },
            error: function (x, y, z) {
               alert(x.responseText +"  " +x.status);
            }
        });

Comments

[ocp]

Hi Aditya , thank you!. Here My webservice is "localhost/ws/service.asmx" and my webmethod is HelloWorld. So how can I give that function fun() { $.get("localhost/ws/service.asmx", function(Helloworld) { //alert(response); }); return true } is it ????

[ocp]

sorry to say.. it is not .. first one is not throwing any error but it is not returning the output string. second one says undefined object data_value

[ocp]

Thank you for your reply , but Sorry it is again returning "Undefind"

[ocp]

the webservice is returning a string "Hello world".

[Aditya]

alert(response) and check what's being returned to your page?

[ocp]

'response' is undefined

[Aditya]

Then you are not returning anything from server side ? check once if you are using context.Response.Write("Hello World"); to send response..

[ocp]

[WebMethod] public string HelloWorld() { return "Hello World"; } this is what my method.. simple one

[Aditya]

public void HelloWord(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello world"); } Try this

[ocp]

I think the webservice call itself is not happening , I was trying to create the log file over the webservice call . but it is not generating any files.

[ocp]

that too giving me undefined

[Aditya]

Check the updated answer, if there is an error in the request

[ocp]

it is returning "Sorry could not proceed"

[Aditya]

onclick ="fun();" , try this

[ocp]

same result "Sorry could not proceed"

[ocp]

I think the webservice call itself is not happening , I was trying to create the log file over the webservice call . but it is not generating any files

[ocp]

if am directly accessing this , it is giving the error "Request format is unrecognized for URL unexpectedly ending in '/HelloWord'."

[ocp]

but if I am accessing the localhost/ws/service.asmx service and then after invoking the method from the browser it is working fine.

[Aditya]

Try setting the URL to your method as the url for GET request, simple

[ocp]

sorry i dint get that

[Aditya]

The URL that u access your method from your browser, set that url for the GET Request?

[Andrew]

Your functions will always return "hello", as they end instantly and before the callback functions are executed.