Send javascript array to server

Question

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>

What language is your server-side application written in? There are different ways that could work for each language. — Justin Niessner
– Justin Niessner, Commented Nov 5, 2012 at 16:24
There is no server-side application. Maybe that's the problem. How do I setup this server side thing? Can I not just throw that array straight to a file on the server? — john-jones
– john-jones, Commented Nov 5, 2012 at 16:45
No, you can't just throw an array to a file on the server by passing it through an AJAX call. You need some server-side code to receive the data, create a new file on the server, and write the data to the file. — Justin Niessner
– Justin Niessner, Commented Nov 5, 2012 at 16:50

adeneo · Accepted Answer · 2016-10-25 22:33:55Z

13

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'];

edited Oct 25, 2016 at 22:33

answered Nov 5, 2012 at 16:24

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

A.M. D. Over a year ago

+1 Looked at the AJAX request in Firebug and it formats the request perfectly fine: so this solution should do the trick.

john-jones Over a year ago

what do you mean php? this is a javascript file, run on client. Can i not just throw this straight to a file on the server?

adeneo Over a year ago

You'll need something to catch it on the server as it's an ajax request that you are sending to the server, right, so you'll need something like a serverside scripting language, and .... wait for it.... PHP is just that.

DefyGravity Over a year ago

you would need to process $array through php's file IO.

adeneo Over a year ago

To get the data, yes! Then you'll have to make sure you don't use that daa for something that's not secure, and you have to write the data somewhere, probably as a string. If you intend to just write it to a file, and use it as an array again later, PHP serialize() and unserialize() function will do that for you.

|

DefyGravity · Accepted Answer · 2012-11-05 17:27:35Z

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);
        }

    }

Rory McCrossan · Accepted Answer · 2012-11-05 16:25:57Z

1

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 }
});

answered Nov 5, 2012 at 16:25

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Collectives™ on Stack Overflow

Send javascript array to server

3 Answers 3

9 Comments

front end stuffs

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

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

front end stuffs

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

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related