--- title: 'JS 傳送資料，表格資料' disqus: hackmd --- ###### tags: `frontend` JS 傳送資料，表格資料 === [TOC] ## 適用場景 想要使用JS去傳送資料或是用ajax在網頁一開起來就有表格資料 ## 先備條件 ## 檔案結構目錄 ## 程式碼部分 ```htmlembedded= <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function() { getPosts(); }) // ajax 抓取文章 function getPosts() { $.ajax({ url: 'http://localhost:3000/', success: function(response) { if (!response.posts) { return alert('Error'); } for(var i = 0; i < response.posts.length; i++) { // 丟給 render function addPost(response.posts[i]); } }, error: function(err) { console.log(err); alert('抓取失敗'); } }) } function addPost(post) { var item = '' + '<div class="panel panel-default">' + '<div class="panel-heading">' + '<h3 class="panel-title">' + post.author +', 發佈時間：' + post.createTime + '</h3>' + '</div>' + '<div class="panel-body">' + post.content '</div>' + '</div>'; $('.posts').append(item); } </script> </head> <body> <div class="container"> <a class="btn btn-primary" href="/posts">發表新留言</a> <h2>留言列表</h2> <div class="posts"> </div> </div> </body> </html> ``` ## 參考連結 1.[前後端分離](https://ithelp.ithome.com.tw/articles/10187675) 2.[Form submission after Javascript Validation](https://stackoverflow.com/questions/32410590/form-submission-after-javascript-validation) 3.[use js to submit form](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit) 4.https://pjchender.blogspot.com/2015/11/javascript.html 5.https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/247282/