CODEWITHSUNDEEP
javascriptjqueryajax
john-jones
john-jones

Reputation: 7780

Send javascript array to server

I have an array who's content I would like to get on my server. I have been wading through internet pages trying to find how to do this without succeeding yet.

Let's imagine I have a server, and that I would like this array in my javascript to go into a file on my server, how would I do that?

I have been going through internet pages looking for how to do this and I have come up with the following code:

<html>
    <!-- installs jquery and ajax. -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
        var arr = ["one","two","three"];
        arr = JSON.stringify(arr);

        $.ajax({
            url: "http://url_name_here.com",
            type: "POST",
            data: {
                myArray : arr
            }
        });

        alert('hello');
    </script>
</html>

Upvotes: 8

Views: 18079

Answers (3)

adeneo
adeneo

Reputation: 318182

That's an array, there's no need to stringify it, jQuery will convert the data to a valid querystring for you

var arr=["one","two","three"];

$.ajax({
    url: "/urltoMyOwnSite.php",
    type: "POST",
    data: {myArray : arr}
});

PHP (if that's what you're using)

$array = $_POST['myArray'];

Upvotes: 13

DefyGravity
DefyGravity

Reputation: 6011

front end stuffs

<html>
    <!-- installs jquery and ajax. -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
    $(function(){
     var arr = ["one","two","three"];
        arr = JSON.stringify(arr);

        $.ajax({
            url: "http://url_name_here.com",
            type: "POST",
            data: {
                myArray : arr
            }
        }).done(function(data,text,jQxhr){
       alert("success");
    });
});
    </script>
</html>

back end server (java b/c it's what I have open in dev atm)

    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import org.json.simple.JSONObject;
    import java.nio.ByteBuffer;
    import java.nio.channels.FileChannel;
    import java.io.FileOutputStream;

    public class MyServlet extends HttpServlet
    {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException,
                IOException
        {
            JSONObject jsonObj = (JSONObject) org.json.simple.JSONValue.parse(request.getParameter("myArray"));
           // write out your file IO.
JSONObject jsonObj = (JSONObject) org.json.simple.JSONValue.parse(request.getParameter("myArray"));
        FileOutputStream file = new FileOutputStream(java.io.File.createTempFile("myArray-",Long.toString((new Date()).getTime())));
        FileChannel fc = file.getChannel();
        ByteBuffer sw = ByteBuffer.allocate(jsonObj.toJSONString().length());
        sw.clear();
        sw.put(jsonObj.toJSONString().getBytes());
        sw.flip();

        while(sw.hasRemaining()) {
            fc.write(sw);
        }
fc.close();
//because its much easier than a flat file, we can write it back in the server response.
        org.json.simple.JSONValue.writeJSONString(jsonObj, response.getWriter());
        }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException,
                IOException
        {
            doGet(request, response);
        }

    }

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

jQuery will stringify the array for you, so you are effectively encoding it twice in your example which is causing your problems. Try this:

var arr = ["one","two","three"];
$.ajax({
    url: "http://url_name_here.com",
    type: "POST",
    data: { myArray : arr }
});

Upvotes: 1

Related Questions