CODEWITHSUNDEEP
javascriptjqueryajaxwcfxmlhttprequest
Nimit Joshi
Nimit Joshi

Reputation: 1046

How to pass parameter in AJAX URL?

I have developed a service which is running successfully. Following is my service code:

namespace WcfService1
{   
[ServiceContract]
public interface IService1
{
    [OperationContract]
    [WebInvoke(Method="GET", ResponseFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.Wrapped, UriTemplate="/display/{a}/{b}")]        
    string Display(string a, string b);        
} 
}

My Service:

namespace WcfService1
{
 public class Service1 : IService1
{
    public string Display(string a, string b)
    {
        int ab = Convert.ToInt32(a);
        int bc = Convert.ToInt32(b);
        int cb = ab + bc;
        return cb.ToString();
    }
}
}

How do I call this with the help of AJAX URL? I have tried out the following code but it is not working.

<script type="text/javascript">
    $(document).ready(function () {
        $('#BtnRegister').click(function () {
            debugger;

            var No1 = document.getElementById('TxtFirstNumber').value;
            var No2 = document.getElementById('TxtSecondNumber').value;

            $.ajax({
                cache: false,
                type: "GET",
                async: false,
                url: "http://localhost:22727/Service1.svc/Display",
                data: 'a=' +No1+'&b='+No2,
                contentType: "application/json; charset=ytf-8",
                dataType: "json",
                processData: true,
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });
        });
    });
</script>

Updated:

I changed my code to the following one:

$(document).ready(function () {
        $('#BtnRegister').click(function () {
            debugger;

            var No1 = document.getElementById('TxtFirstNumber').value;
            var No2 = document.getElementById('TxtSecondNumber').value;

            $.ajax({
                cache: false,
                type: "GET",
                url: "http://localhost:22727/Service1.svc/Display",
                data: { a: No1, b: No2 },
                contentType: "application/json; charset=ytf-8",
                //processData: true, //<-- this isn't needed because it defaults to true anyway
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });
        });
    });

But when I am clicking on the button:

enter image description here

Upvotes: 1

Views: 73226

Answers (4)

MrCode
MrCode

Reputation: 64536

According to the service definition, it's expecting JSON as the request format, but you're passing a form encoded key/value pair. So change the data part to:

data: {a : No1, b : No2},

This will pass an object, and because you have the content type set to JSON, jQuery will automatically transform the object to JSON for the request.

Also, your service is returning a string, not JSON, so you need to remove dataType: "json", because if you leave this in, jQuery will try to parse the response as JSON and it will trigger the error handler instead of success.

I suggest removing the async: false because ajax is best used asynchronously and there is no benefit to a synchronous request in this case.

Full request after the above changes:

$.ajax({
    cache: false,
    type: "GET",
    url: "http://localhost:22727/Service1.svc/Display",
    data: {a : No1, b : No2},
    contentType: "application/json; charset=ytf-8",
    //processData: true, //<-- this isn't needed because it defaults to true anyway
    success: function (result) {
        alert("data");
    },
    error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
});

UPDATE after question editted:

Your service lives on a different port to your the origin of your JavaScript, therefore the request failing due to Same Origin Policy.

To resolve, you will need to output the CORS header from the service:

Access-Control-Allow-Origin: *

This will allow any origin to call the service, you might want to restrict it to certain origins.

Upvotes: 2

AppleBud
AppleBud

Reputation: 1541

Try this:

$.ajax({
   type:'GET',
   url:'your url',
   data:{ var1: value1, var2: value2},
   success:function(response)
{

}

});

and on the business layer, retrieve these using the variable names ie. var1 and var2.

Upvotes: 2

Ray1618
Ray1618

Reputation: 158

I think data should be an object like this and remove the async = false:

$.ajax({
                cache: false,
                type: "GET",
                url: "http://localhost:22727/Service1.svc/Display",
                data: {
                     a: No1,
                     b: No2
                },
                contentType: "application/json; charset=ytf-8",
                dataType: "json",
                processData: true,
                success: function (result) {
                    alert("data");
                },
                error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
            });

Upvotes: 0

KarthikManoharan
KarthikManoharan

Reputation: 805

Try this one,

var params = {a: No1, b:No2}

 <script type="text/javascript">
$(document).ready(function () {
    $('#BtnRegister').click(function () {
        debugger;

        var No1 = document.getElementById('TxtFirstNumber').value;
        var No2 = document.getElementById('TxtSecondNumber').value;

           var params = {a: No1, b:No2}

        $.ajax({
            cache: false,
            type: "GET",
            async: false,
            url: "http://localhost:22727/Service1.svc/Display",
            data: params,
            contentType: "application/json; charset=ytf-8",
            dataType: "json",
            processData: true,
            success: function (result) {
                alert("data");
            },
            error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
        });
    });
});

Upvotes: 0

Related Questions