安安~今天的內容就是把前兩天的文章做出最後的結果AJAX-post,所以如果覺得內容跳太多的話可以往回看前兩篇再來繼續歐!

1.先來做一個小測試,在昨日的html程式碼中加入一個隱藏欄位,讓他回傳的是JSON

input(type="hidden" name="json" value="true")
// 接著輸入資料,點選送出會發現回傳了json
// 在增加hidden讓使用者不會看到
// 沒問題後先把value變空值 value=""
//設置一個AJAX button
button.AJAXbtn AJAX送出

測試結果如圖,會長這個樣子

2.當新增完點擊事件,輸入完資料送出後,但系統又手動送回後端回饋出網頁,所以不想讓他觸發預設的跳轉,必須設置一個引數(evt)並使用preventDefault,可以控制原生的動作(如在本題防止表單自動送出重新整理)

var r = $("[name='option']").val()
console.log(r)
// 增加js
$(".AJAXbtn").click(function(evt){
	evt.preventDefault()
	console.log("ajax送出")

3.設置AJAX送出

// 設置AJAX送出,使用preventDefault
$(".AJAXbtn").click(function(evt){
	evt.preventDefault()
	console.log("ajax送出")
  post() // 打包表單資料寫完要記得回來呼叫
// 打包表單資料
function post(){
  var datas = $("form").serializeArray()
  $.ajax({
    url:"https://2017.awiclass.monoame.com/api/demo/feedback",
    method:"post",
    data:datas,
    success: function(res){
      console.log('ajax result:')
      console.log(res)

輸入完資料按送出就會跑出以下後端回傳的資料:

把它改成JSON才好處理,在function post裡面增加這段程式碼:

function post(){
  var datas = $("form").serializeArray()
// 增加這段--------------------------------------
datas.find((obj)=>obj.name=='json').value="true"
// ---------------------------------------------
  $.ajax({
    url:"https://2017.awiclass.monoame.com/api/demo/feedback",
    method:"post",
    data:datas,
    success: function(res){
      console.log('ajax result:')
      console.log(res)

術後結果:

最後就是把AJAX的結果顯示在畫面上,回到html增加一個顯示的欄位

// 在button上面新增一個欄位
.feedback

抓取feedback裝上新的文字,新的文字是:res裡面的response(上面的圖片就是res內的東西)

// 打包表單資料
function post(){
  var datas = $("form").serializeArray()
  $.ajax({
    url:"https://2017.awiclass.monoame.com/api/demo/feedback",
    method:"post",
    data:datas,
    success: function(res){
      console.log('ajax result:')
      console.log(res)
// 抓feedback裝上新的文字,新的文字是:res裡面的response
			$('.feedback').text(res.response)

輸入完資料,點選不推薦,按AJAX送出後就會顯示出紅色框框的結果給使用者

YA~那終於把AJAX post告一段落了...感謝大家