JavaScript

$("#bt").click(function () {

var url = "http://localhost:8318/Service1.svc/AddStudant";
var data = { "ID": 1, "Name": "Ericsson Alves" };
var jdata = {};
jdata.student = data;

callAjax(url, 'json', 'POST',
                function (result) {
                    alert(result);
                },
                JSON.stringify(jdata)
                );
});

function callAjax(ajaxUrl, ajaxDataType, ajaxType, funcSucess, dataValues) {

        $.ajax({
            url: ajaxUrl,
            dataType: ajaxDataType,
            type: ajaxType,
            data: dataValues,
            processdata: true,
            contentType: "application/json;charset-uf8"
        })
            .done(function (data) {
                funcSucess(data);
            })
            .always(function (data) {

            }).fail(function (xhr, status, errorThrown) {
                alert(xhr.responseText);
            });
    }

[ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        ResponseFormat = WebMessageFormat.Json)]
        Student GetData(int id);

        [OperationContract]
        [WebInvoke(Method = "POST",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        ResponseFormat = WebMessageFormat.Json,
        RequestFormat = WebMessageFormat.Json)]
        Student AddStudant(Student student);
        
    }

[DataContract]
    public class Student
    {
        [DataMember]
        public int ID { get; set; }
        [DataMember]
        public string Name { get; set; }
    }

[AspNetCompatibilityRequirements(RequirementsMode
    = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1 : IService1
    {
        [WebInvoke(Method = "GET",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        ResponseFormat = WebMessageFormat.Json)]
        public Student GetData(int id)
        {
            return new Student() { ID = id, Name ="Ericsson Alves" };
        }

        [WebInvoke(Method = "POST",
        BodyStyle = WebMessageBodyStyle.WrappedRequest,
        ResponseFormat = WebMessageFormat.Json,
        RequestFormat = WebMessageFormat.Json)]
        public Student AddStudant(Student student)
        {
            return new Student() { ID = student.ID , Name ="Ericsson Alves" };
        }
    }

<?xml version="1.0"?>
<configuration>

  <appSettings>
    <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <system.serviceModel>

    <bindings>
      <webHttpBinding>
        <binding name="WebHttpBdg" maxBufferSize="2147483647" maxReceivedMessageSize="2147483647" />
      </webHttpBinding>
    </bindings>

    <behaviors>
      <serviceBehaviors>
        <behavior name="BehaviorDefault">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="AJAXWCFServiceAspNetAjaxBehavior">
          <webHttp defaultOutgoingResponseFormat="Json" automaticFormatSelectionEnabled="true" />
        </behavior>
      </endpointBehaviors>
    </behaviors>

    <services>
      <service name="TestWCFJsonAjax.Service.Service1" behaviorConfiguration="BehaviorDefault">
        <endpoint address="" binding="webHttpBinding" bindingConfiguration="WebHttpBdg"
                  behaviorConfiguration="AJAXWCFServiceAspNetAjaxBehavior"
          name="Service1" contract="TestWCFJsonAjax.Service.IService1" />
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
      </service>
    </services>
    
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
      multipleSiteBindingsEnabled="true" />
    
    <standardEndpoints>
      <webHttpEndpoint>
        <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true" crossDomainScriptAccessEnabled="true" />
      </webHttpEndpoint>
    </standardEndpoints>
    
  </system.serviceModel>

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
    <directoryBrowse enabled="true"/>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <!--<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />-->
      </customHeaders>
    </httpProtocol>
  </system.webServer>

</configuration>

public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.Add(new ServiceRoute("", new WebServiceHostFactory(), typeof(Service1)));
        }
        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            //HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            //HttpContext.Current.Response.Cache.SetNoStore();

            //EnableCrossDmainAjaxCall();
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }
    }

example 1:
when i am select India ,it will display in textbox : 06/Feb/2014
 
 india  dd-MM-yyyy


example 2:
when i am select USA ,it will display in textbox : Feb/06/2014

USA  mm/dd/yyyy

<html>
<head><title> date time</title> </head>



<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="jquery.jdpicker.js"></script>



<body>
<link rel="stylesheet" href="jdpicker.css" type="text/css" media="screen" />



<div><div class="jdpicker_w"><input id="test1" type="text" name="test"></input>
</body>

<script>



$('#test1').jdPicker({
     date_format:"dd MM YYYY",
});



$(document).ready(function(){
   $('#your_input').jdPicker();
});
$(document).ready(function(){
   $('#your_input').jdPicker({
      start_of_week:2,
      show_week:1
   });
});

<body>
 <div id="page">
   <div id="myOutputs">


   </div>

<script type="text/javascript">
 $(document).ready(function () {         
         
    if ($('#box1').click())
    {      
        $(".BTN").click(function () {
            if ($.isNumeric($(this).html())){
                $("#box1").val($("#box1").val() + $(this).html());           
        }});    
             
         }
         else
             if ($('#box2').click())
             {                  
                 $(".BTN").click(function () {
                     if ($.isNumeric($(this).html())) {
                         $("#box2").val($("#box2").val() + $(this).html());
                     }
                         
                     });                 
             }
             else
                 if ($('#box3').click())
                 {
                     $(".BTN").click(function () {
                         if ($.isNumeric($(this).html())) {
                             $("#box3").val($("#box3").val() + $(this).html());    
                         }});
                 }

        $("#functs").click(function () {
         
       document.getElementById("myOutputs").innerHTML =
        "<table id='data-table'>"
       + "<tr>"
            + "<td><input type='text' id='box1'/><td></tr>"
       + "<tr>"
            + "<td><input type='text' id='box2'/><td></tr>"
       + "<tr>"
            + "<td ><input type='text' id='box3'/><td></tr>"
       + "</table>";
       document.getElementById('box1').tabIndex = "1";
       document.getElementById('box2').tabIndex = "2";
       document.getElementById('box3').tabIndex = "3";
      });
}

<script type="text/javascript">
     function ProcessRegistration() {
         jQuery.support.cors = true;

         $.getJSON("http://www.mydomain.mymaindomain.com/api/Registration/Create", function (data) {
             alert(data);

         });
     }    </script>

<system.webServer>

   <httpProtocol>
   <customHeaders>
     <add name="Access-Control-Allow-Origin" value="*" />
   </customHeaders>
 </httpProtocol>

 <...........

<form name="registrationForm"    method="post">

< <input title="Register"  onclick="ProcessRegistration();" style="width: 100px; height: 100px; align-self: center" type="submit" name="submit_fourth" id="submit1" value="register" />

function ProcessRegistration()
      {

          $.getJSON("http://www.mydomain.maindomain.com/api/Registration/Create", function (data) {

              alert(data);
          });


      }

 XMLHttpRequest cannot load http://www.mydomain.maindomain.com/api/Registration/Create. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:46506' is therefore not allowed access.