Click here to Skip to main content
16,016,744 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I made one application on Blackberry development I post some data on server .I am able to do that .But Now I am learning jquery and jquery mobile .Now I need to post the data on server using query.I made my Ui in jquery Mobile .I need some help in posting the data on server . I did like in that Blackberry

CSS
Name gg
Depot Barrow
Turn No 1
Date/Time:28:07:2013 02:22
origin Ardwick
Dest barrow
Headcode: hnh
Status :No 1st class Impact

{"headcode":"hnh","destination":"Barrow","origin":"Ardwick","time":"28:07:2013 02:22","turnNumber":"1","depot":"Barrow","conductorName":"gg","devicePin":"123456.78.364813.8","noFirstClassImpact":"true","customersInvited":"false","customersUninvited":"false","customersLeft":"false"}


public static String fsReportUrl = "http://50.57.145.165:8180/FTPEReport/ftpereports/fsreport?fsReport=";

Now I need to Post this using query .Here is my fiddle. http://jsfiddle.net/ravi1989/NKBUF/2/

XML
<div data-role="page" id="Home" >
     <div data-role="content">

          <label for="name" style="text-align:top;margin-left: 0px;" >conductorName:</label>
                        <input name="name" id="name" value="" type="text" class="Name_h" autocorrect="off">

    <label for="deport" style="text-align:top;margin-left: 0px;" >Deport:</label>
                        <input name="deport" id="deport" value="" type="text" class="deport_h" autocorrect="off">

         <label for="dateandTime" style="text-align:top;margin-left: 0px;" >dateTime:</label>
         <input name="dateandTime" id="dateandTime" value="" type="date" class="">

                   <label for="origin" style="text-align:top;margin-left: 0px;" >origin:</label>
         <input name="origin" id="origin" value="" type="text" class="">
                                <label for="dest" style="text-align:top;margin-left: 0px;" >Destination:</label>
         <input name="dest" id="dest" value="" type="text" class="">
      <label for="headcode" style="text-align:top;margin-left: 0px;" >Headcode:</label>
         <input name="headcode" id="headcode" value="" type="text" class="">
                <label for="devicepin" style="text-align:top;margin-left: 0px;" >Devicepin:</label>
         <input name="devicepin" id="devicepin" value="" type="text" class="">
             <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">

        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">customersInvited</label>
        <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
        <label for="checkbox-2">customersunInvited</label>
        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
        <label for="checkbox-3">customerLeft</label>
         <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" />
        <label for="checkbox-4">noFirstClassImpact</label>
    </fieldset>
</div>
                                 <a href="#" data-role="button" data-corners="false" id="callJsonFunfunction">Call webservice</a>

             </div>

</div>
Posted

1 solution

You cant do direct service call to Web server from a jQuery application unless both your app and service is hosted in same service. For that you can add a proxy page to the project that can connect to service. Proxy can be an aspx page.

If Both Client and service in same server you can use code bellow:

JavaScript
var params = { //Add you parameters from your registration form here.
       "Paramete1": Parameter1,
       "Parameter2": Parameter2,
       "Parameter3": Parameter3,
   };
   $.ajax({
       type: "POST",
       url: "http://50.57.145.165:8180/FTPEReport/ftpereports/fsreport?fsReport=",
       async: true,
       cache: false,
       crossDomain: true,
       contentType: "application/json; charset=utf-8",
       dataType: 'json',
       data: JSON.stringify(params),
       success: function (data) {
           alert("Sucess");
       },
       error: function (xhr) {
           alert("Error");
       }
   });


If Both Client and server is in different server then(I am here using .net framework to create proxy.) add a new aspx file in to project. From js call this aspx page through service call. Here the aspx page name is "ServiceCall.aspx"
JavaScript
var data ={ //Add you parameters from your registration form here.
        "Paramete1": Parameter1,
        "Parameter2": Parameter2,
        "Parameter3": Parameter3,
    };
$.ajax({
        cache: true,
        type: "POST",
        async: true,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: "ServiceCall.aspx?ServiceType= POST",
        data: data,
        success: function (data) {
            alert("Sucess");
        },
        error: function (xhr) {
            alert("Error");
        }
    });
});


add the following code in ServiceCall.Cs Page
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ServerCall : System.Web.UI.Page
{
  
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public override void ProcessRequest(HttpContext context)
    {
        var data = context.Request;
        var sr = new StreamReader(data.InputStream);
        var stream = sr.ReadToEnd();
        string type = HttpContext.Current.Request.QueryString["ServiceType"]; ;
        try
        {
            NetworkCredential credential = new NetworkCredential("username", "password"); // If servver need username and pass to authenticate
            HttpWebRequest httpWebRequest = (HttpWebRequest)WebRequest.Create("http://50.57.145.165:8180/FTPEReport/ftpereports/fsreport?fsReport=");
            httpWebRequest.Credentials = credential;
            httpWebRequest.ContentType = "application/json; charset=utf-8";
            httpWebRequest.Accept = "application/json";
            if (type == "GET")
            {
                httpWebRequest.Method = WebRequestMethods.Http.Get;
                var response = (HttpWebResponse)httpWebRequest.GetResponse();
                using (var twitpicResponse = (HttpWebResponse)httpWebRequest.GetResponse())
                {
                    using (var reader = new StreamReader(twitpicResponse.GetResponseStream()))
                    {
                        JavaScriptSerializer js = new JavaScriptSerializer();
                        var objText = reader.ReadToEnd();
                        HttpContext.Current.Response.Write(objText);
                        HttpContext.Current.ApplicationInstance.CompleteRequest();
                    }
                }
            }
            else
            {
                httpWebRequest.Method = WebRequestMethods.Http.Post;
                using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
                {
                    streamWriter.Write(stream);
                    streamWriter.Flush();
                    streamWriter.Close();
                }
                var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
                using (var reader = new StreamReader(httpResponse.GetResponseStream()))
                {
                    JavaScriptSerializer js = new JavaScriptSerializer();
                    var objText = reader.ReadToEnd();
                    HttpContext.Current.Response.Write(objText);
                    HttpContext.Current.ApplicationInstance.CompleteRequest();
                }
            }
        }
        catch (Exception ex)
        {
           
        }

    }
}



Hope this helps
Happy Coding :-)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900