title: How to pass parameter in AJAX URL?
body: <p>I have developed a service which is running successfully. Following is my service code:</p>
  
  <pre><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);        
  } 
  }
  </code></pre>
  
  <p>My Service:</p>
  
  <pre><code>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();
      }
  }
  }
  </code></pre>
  
  <p>How do I call this with the help of AJAX URL? I have tried out the following code but it is not working.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(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+'&amp;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); }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Updated:</p>
  
  <p>I changed my code to the following one:</p>
  
  <pre><code>$(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, //&lt;-- this isn't needed because it defaults to true anyway
                  success: function (result) {
                      alert("data");
                  },
                  error: function (xhr, textStatus, errorThrown) { alert(textStatus + ':' + errorThrown); }
              });
          });
      });
  </code></pre>
  
  <p>But when I am clicking on the button:</p>
  
  <p><img src="https://i.stack.imgur.com/73AOH.jpg" alt="enter image description here"></p>