如何使用Ajax在服务器上发布Json数据

Question

我在Blackberry开发上做了一个应用程序，在服务器上发布了一些数据。我能够做到。但是现在我正在学习jquery和jquery mobile。现在我需要使用query将数据发布到服务器上。我需要一些帮助将数据发布到服务器上。 我喜欢那个黑莓

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=";

现在我需要使用查询来发布它。这是我的小提琴。 http://jsfiddle.net/ravi1989/NKBUF/2/

<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>

我认为使用ajax可以轻松完成。

我在BB中使用这种方式。

public static String postJson(JSONObject jsonObj, String url) {
        String response = ""; // this variable used for the server response

            JSONObject postData = jsonObj;
            String valueObj = "";

            try {

                UrlImpl fullUrl = new UrlImpl();
                fullUrl.setBaseUrl(url);
                valueObj = fullUrl.getFullUrl();

                HttpConnection connection = (HttpConnection) Connector
                        .open(valueObj);
                // set the header property
                connection.setRequestMethod(HttpConnection.POST);
                connection.setRequestProperty("Content-Length",
                        Integer.toString(postData.length()));
                connection.setRequestProperty("Content-Type",
                        "application/json;charset=UTF-8");
                byte[] postDataByte = postData.toString().getBytes("UTF-8");
                OutputStream out = connection.openOutputStream();
                out.write(postDataByte);
                out.flush();
                out.close();
                int responseCode = connection.getResponseCode();
                if (responseCode == HttpConnection.HTTP_OK) {

                    InputStream in = connection.openInputStream();
                    StringBuffer buf = new StringBuffer();
                    int read = -1;
                    while ((read = in.read()) != -1)
                        buf.append((char) read);

                    response = buf.toString();
                }

                connection.close();
            } catch (Exception e) {
                XLogger.error(DataAccess.class, " Error in post reports -- " + e);
            }

        return response;

    }

Answer 1

它可能看起来像这样：

$(document).ready(function () {

    $('#callJsonFunfunction').on('click', function () {
        var 
            data = $(this).closest('[data-role="content"]').find('input').serialize();

        $.post("http://50.57.145.165:8180/FTPEReport/ftpereports/fsreport?fsReport=", data, function(resp) {
            alert("success");
            console.log(resp);
        })
        .done(function() { alert("second success"); })
        .fail(function() { alert("error"); })
        .always(function() { alert("finished"); });
    });

});