CODEWITHSUNDEEP
c#asp.netjquery
Carlo Adap
Carlo Adap

Reputation: 257

Ajax jquery passing multiple parameters web services

<script type="text/javascript">
        $('#btnregister').click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "fetchusers.asmx/RegUsers",
                data: "{ username: '" + $("#txtuser").val() + "name: '" + $("#txtname").val() + "'}",
                dataType: "json",
                success: function (data) {
                    alert("Successfully register");
                    $("#btnregclose").click();
                }
            });
        });
    </script>

<div id="registration">
        <fieldset>
            <legend>Registration Form</legend>
                <input id="txtuser" type="text" placeholder="Username" /><br />
                <input id="txtname" type="text" placeholder="Name" /><br />
                <input id="txtpass" type="password" placeholder="password" /><br />
                <input id="txtconfirmpass" type="password" placeholder="confirm password" /><br />
                <input id="btnregister" type="button" value="Register" />
                <input id="btnregclose" type="button" value="close" />
        </fieldset>
    </div>


[WebMethod]
        public string RegUsers(string username, string name)
        {
            string response = username + name;

            return response;
        }

I'm a beginner in Ajax Jquery and I'm doing exercise to improve my knowledge about it. My problem is when I click #btnregister it's not working. I think there's a problem in the parameters I passed on the ajax but I don't know what is it.

Upvotes: 2

Views: 25022

Answers (4)

Usman
Usman

Reputation: 2577

The code in the question is right it needs simple solution. Go to yourwebservice.asmx.cs file and uncomment the following line given at class level this will resolve the issue of calling this webservice from jQuery or Ajax.

[System.Web.Script.Services.ScriptService]

Upvotes: 0

computrius
computrius

Reputation: 702

Instead of trying to build the string by concatination it might be easier to do something like this:

$.ajax(url, {
    data: JSON.stringify({
        username: $("#txtuser").val(),
        name: $("#txtname).val()
    })
});

It will prevent typos/problems that might occur if you have say, a comma, in one of your fields. Note though, that ie7 and lower will require you to include a file called json2.js (github).

Edit: Also, try executing your web service manually (just browse to the url, use a poster, etc). It is entirely possible you are getting a 404, or a server error.

Edit part 2: A good way to debug ajax issues in firefox is to use ctrl-shift-k to open the web console. Make sure "Net" is enabled and that "Log Request and Response Bodies" is checked in its dropdown. This way you can see the requests going out and coming back. If you dont see one then its an issue with your javascript, not the ajax.

Another Edit: Also, I see your click event isnt in a $(document).ready(function() {}); It could be that you are attaching the click event before the button is rendered. Therefore the event isnt attached and your not even executing the ajax code.

Upvotes: 3

Gavin Fang
Gavin Fang

Reputation: 367

try this :

 $(document).ready(function () {
        $('#btnregister').click(function () {
            var obj = { username: $("#txtuser").val(), name: $("#txtname").val() };
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "fetchusers.asmx/RegUsers",
                data: JSON.stringify(obj),
                dataType: "json",
                success: function (data) {
                    alert("Successfully register");
                    $("#btnregclose").click();
                }
            });
        });
    });

this worked in my local enviroment.

Upvotes: 4

felix Antony
felix Antony

Reputation: 1460

use this syntax....

data: "{ 'username': '" + $("#txtuser").val() + "', 'name': '" + $("#txtname").val() + "'}",

Upvotes: 1

Related Questions