How to consume an ASMX web service from a pure HTML markup

Question

User460266172 posted

I have created a web service successfully and even tested it. Perfect. But after hosting the service and trying to consume it using an HTML form, I keep getting a "Runtime Error". What is there to be done, again, Please.

This is a snippet of the HTML which calls the service

<form action='http://www.trafficdey.com/user.asmx/Create' method="post">
         Username: <input type="text" name="userName"/><br />
         Password: <input type="text" name="password"/><br />
         First Name: <input type="text" name="firstName"/><br />
         Last Name: <input type="text" name="lastName"/><br />
         Mobile Number: <input type="text" name="mobileNumber"/><br />
        <button type="submit">Create user</button>
    </form>

Answer 1

User954927490 posted

try like this...

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            // Add the page method call as an onclick handler for the div.
            $("#Result").click(function () {
               
                var mydata = {
                    name: $("#txtname").val(),
                    email: $("#txtemail").val()
                }
               
                $.ajax({
                    type: "POST",
                    url: "pagewebmethod.aspx/GetDate",
                     data : JSON.stringify(mydata),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        // Replace the div's content with the page method's return.
                        $("#Result").text(msg.d);
                        $("#pcountry").text("Click here to get country list.");
                    }
                });
            });
});

same way you can pass other value also . in webmethdo i have done like this..

[WebMethod]
public static string GetDate(string name, string email)
{

// your code to inert values here

}

check this link also..

http://deebujacob.blogspot.in/2012/01/aspnet-ajax-web-method-call-using.html

Answer 2

User260886948 posted

Hi,

For calling wcf from a html page, we can use the JQuery.

Here are some articles which may help you to get start:

#Call WCF Service form HTML5 page through JQuery:
http://tejasrpatel.wordpress.com/2011/12/28/call-wcf-service-form-html5-page-through-jquery-using-json-and-ajax-post-method/ .

#WCF RESTful services and consuming them in an HTML page:
http://www.codeproject.com/Articles/613097/WCF-RESTful-services-and-consuming-them-in-an-HTML .

#Call WCF service using jQuery AJAX:
http://www.aspsnippets.com/Articles/Make-AJAX-JSON-call-to-ASP.Net-WCF-Service-using-jQuery-and-Javascript.aspx.

Best Regards,
Amy Peng