Passing a value into Ajax enable WCF web service with jQuery.

Question

Hi,

I have created an Ajax enabled WCF web service that contains this simple method:

 [OperationContract]
    public string ParameterizedConnectionTest(string word)
    {
        return string.Format("You entered the word: {0}", word);

    }

I can invoke the Web service with this client side JQuery code:

<script type="text/javascript">

function btn_Connect_onclick() {

    $.ajax({

        type: "POST",
        url: "/MySimpleService.svc/ParameterizedConnectionTest",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data:'{"word":"Wolverine"}',
        success: function(data) {

            alert(data.d);

        }

    });

}

So basically when I click the input button what I get is a message box with the result from the Web service plus the new word. "You entered the word: Wolverine"

I want to know how I could pass the input value like "Wolverine" from a text box instead of being hardcoded and then display that value in another textbox instead of a message box.

Right now I am using a simple .html page.

thank you.

Answer 1

Simply:

function btn_Connect_onclick() {

    $.ajax({

        type: "POST",
        url: "/MySimpleService.svc/ParameterizedConnectionTest",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data:'{"word":"' + $('#inputTextBox').val() + '"}',
        success: function(data) {

            $('#result').val(data.d);

        }

    });

}

And the markup:

<input type="text" id="inputTextBox"/>
<input type="text" id="result"/>

Answer 2

I assume your question is 'how can I get a value from an input box'. You can do that using jQuery selectors and the .val() method. Also I'm not sure what you're trying to do with the data part, it looks like an object but it's a string. You know, you can also pass an real object there.

$.ajax({
    type: 'POST',
    url: '/MySimpleService.svc/ParameterizedConnectionTest',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: {
        word: $('input[name=something]').val()
    },
    success: function(data) {
        alert(data.d);
    }
});