<p>I am working on github.com/thewhitetulip/Tasks and what I want to do is use Ajax to add/delete/update tasks.</p>
<p>I know Ajax works by sending Get and Post requests in the background. But I am not understanding how exactly it does. I have a working non ajax application.
Any help will be appreciated!</p>
<hr/>**评论：**<br/><br/>comrade_donkey: <pre><p>It works just like any HTTP request with the only difference that it has an additional request header "X-Requested-With". What exactly are you struggling with?</p></pre>thewhitetulip: <pre><p>I have one form of adding task, two ID's Taskheading and TaskContent</p>
<ol>
<li>how'd I send a post request via javascript</li>
<li>I know how to read the form and insert it into the db</li>
<li>I have 2 tasks already, and via ajax I added the third task, so how do I populate the 3rd task on the timeline? Do I use javascript to add items into the timeline?</li>
</ol>
<p>I'd really be grateful for a very simple example :-)</p></pre>jimmeyotoole: <pre><p>This is basic JavaScript stuff. Look at jquery .post function is probably the easiest place you get started. Jquery is a library that makes it easy to call all the elements you'd want from js In an easier format. It's conceptually a little dated in the front end world more but suitable for simple web calls and updates. In regards to population your post function will have a callback with the data of the response from your go api. This can be used to update your timeline with like $('timeline').append(newthing).</p></pre>thewhitetulip: <pre><p>Thank you for your response! I assume if I have an AJAX call to delete a task then I'd have to delete that particular task form the timeline as well?</p>
<p>Which brings me to the question</p>
<blockquote>
<p>$("button").click(function(){
$.get("/delete/12", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});</p>
</blockquote>
<p>i presume data is an object returned by the ajax call and status is the status returned?</p></pre>jimmeyotoole: <pre><p>Yes. So status would be the http code. 200 for OK, 400 or 500 for an error. If your data Returns json then it's really easy to work with in JS. </p></pre>headzoo: <pre><p>Kind of on topic... Try to use HTTP verbs (GET, PUT, DELETE, POST, etc) the way they were meant to be used. Instead of having an endpoint like <code>/delete/12</code>, you should have the endpoint <code>/tasks/12</code> and you send a DELETE request to tell the backend to delete the resource located at that endpoint.</p>
<p>Your ajax request would look something like this.</p>
<pre><code><input id="task-id" type="hidden" value="12" />
<button>Delete task 12</button>
<script>
$(function() {
$("button").on("click", function() {
var task_id = $("#task-id").val();
$.ajax({
url: "/tasks/" + task_id,
type: "DELETE"
}).done(function(res, status) {
console.log(status, res);
});
});
});
</script>
</code></pre>
<p>On the backend you should have a route configured to handle requests to <code>/tasks/:id</code> <em>only</em> for DELETE request methods, just like you would have handlers configured to handle requests to the same route for GET and POST requests.</p>
<p>Don't think of your endpoints (URLs) as method calls. Think of them as resources (files) sitting at that location: there is a task "file" sitting at <code>/tasks/12</code>. You manipulate the resource using HTTP verbs. GET request to view the contents of the resource. POST request to update the contents, and a DELETE request to delete the resource.</p></pre>thewhitetulip: <pre><blockquote>
<p>Don't think of your endpoints (URLs) as method calls. </p>
</blockquote>
<p>This is epic, had never thought from this point of view.</p>
<p>Also thank you for a detailed example!!</p></pre>natdm: <pre><p>Don't listen to jimmeyotoole.</p>
<p>Learn it in basic JS first. It's really not that hard.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript</a></p>
<p>Search that page for "sendData" to find the function you need to learn.</p></pre>jimmeyotoole: <pre><p>Yes, learn to write 40 lines of cover you don't understand instead of 4 you do. Listen to this guy.</p></pre>natdm: <pre><p>Or you know. Import an entire library to use the one method. That works too.</p>
<p>He did ask via Javascript, and you provided via jquery. </p></pre>thewhitetulip: <pre><p>Actually it is totally fine via jquery as well, I don't mind :-) I just want to learn ajax that's it </p></pre>youmeangit: <pre><p>Making an http ajax request does not take 40 lines without javascript.</p>
<p>This comment is exceedingly cringeworthy. </p></pre>dhdfdh: <pre><p>Shirley there must be eighty to ninety frameworks and libraries out there by now to do this for him.</p></pre>thewhitetulip: <pre><p>I'm sorry who's shirley?</p></pre>dhdfdh: <pre><p><a href="https://www.youtube.com/watch?v=KM2K7sV-K74" rel="nofollow">Shirley</a></p></pre>1Gijs: <pre><p>A basic example: <a href="https://github.com/jimmahoney/golang-webserver" rel="nofollow">https://github.com/jimmahoney/golang-webserver</a></p></pre>thewhitetulip: <pre><p>thank you!</p></pre>
