Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points

Posting data to a file in localhost using WAMP

Hello everyone,

I am trying to post data to a .json file on my local web server titled sampleJSON.json after I reviewed the video on teamtreehouse about posting form data to a web server. In this test I'm not attempting to post form data instead just send JSON formatted data to my sampleJSON.json file. First I'll post the HTML I'm using and then then my jQuery.

    <html>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="js/postDemo.js"></script>
    <head>
        <title>Post Test</title>
    </head>
    <body>
        <h1>Try it out</h1>
        <button id="sample">Press</button>

    </body>
    </html>

    var url = "localhost/postTest/js/sampleJSON.json"
    var data = [
        {
            name: "Stitches",
            role: "tank"
        },
        {
            name: "Sonya",
            role: "bruiser"
        }

    ];
    $("#sample").click(function(){
        $.post(url, data, function(response){
        alert("Did it work");
        });
    });

So when I click the sample button with the id of sample I want to post the data inside the postDemo.js file to my JSON file. When I click on the button nothing happens though I don't get any errors so I'm not sure why this isn't working the way I want it to.

5 Answers

Lindsay Sauer
Lindsay Sauer
12,029 Points

Try wrapping $(document).ready (function() { around it:

 $(document).ready (function() {
     $("#sample").click(function(){
        $.post(url, data, function(response){
           alert("Did it work");
        });
     });
  });

Alternately, you can include postDemo.js after your html is added, but before the <html> tag:

    <script src="postDemo.js"></script>
 </html>
Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points

Nice that worked out for me thanks for the note about putting this all at the end of the index.html.

So now the post is working when I click the button, but nothing is being written to my sampleJSON.json file. Am I missing an extra step?

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

Hi Maurice,

Are you getting an error in your Developer Console (F12)? Check the Console to see if it gives you any error.

Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points

I am not.

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

By being written, do you mean actually inserting that data into sampleJSON.json and then saving it?

$.post just loads data from the server. What your code is doing is calling your sampleJSON.json file and then runs a function if the request succeeds. If you're wanting to save that data to a json file, you have do something like call a php file and use the data you pass and create a file (see fopen)

Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points
Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points

Yes when I am using "written" I am meaning "to save something" to a file.

I suppose now I have to look into PHP. Retrieving JSON data from a web server is definitely not as easy as these videos have lead me to believe. I wasn't remotely aware that PHP is necessary to save JSON data.

The topics I've covered so far concerning back end web development are just AJAX and the beginnings of node.js, this really makes me wonder when I'll learn something like saving data to a file on a web server.

Thanks for your help.

Lindsay Sauer
Lindsay Sauer
12,029 Points
Lindsay Sauer
Lindsay Sauer
12,029 Points

I have more experience with PHP than node.js, so I default to that method; but with node.js, it looks like you could do it: http://stackoverflow.com/questions/2496710/writing-files-in-node-js

Maurice Tafolla- Cunningham
Maurice Tafolla- Cunningham
7,708 Points

Nice I'm definitely going to look into this thanks a lot.