Ajax - jQuery + HTML表單 - 無法在表單中顯示選定的選項

Question

嘗試使用表單實踐AJAX。

我不確定是否設置此權利。

我想要做的是，當你點擊提交時，會有一條消息說「你選擇的號碼是＃」 - 你從下拉列表中選擇的號碼。

當我點擊提交雖然，它打開了一個錯誤頁面......所以很明顯有什麼是錯的。不確定是否有必要的功能？基本上，我試圖從CodeSchool複製的場景:)

https://jsfiddle.net/zjtbf64p/4/

編輯：在此先感謝！

******HTML******* 
<form action="/echo/html" method="POST"> 
    <select> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <input type="submit" value="submit"/> 
</form> 
<div></div> 


******JAVASCRIPT******* 
function test() { 
    $('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/echo/html/', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('div').html('you chose ' + result); 
     } 
    }); 
    }); 
}; 

$(document).ready(function() { 
    test(); 
}); 

Answer 1

測試後你不需要擴展名（.php）嗎？ - 也就是說，正確的路徑 - 如果它在同一目錄yuo不需要「/」字符。

$.ajax('/test.php',... 

而且 - 假設你將有其他形式和申報單 - 最好的識別通過ID，類或名稱各給他們正確的目標，不要忘記把名字您的輸入要素，否則他們不會可以作爲表單元素訪問。

******HTML******* 
<form name="testForm" action="/test.php" method="POST"> 
    <select name="testSelect"> 
    <option>1</option> 
    <option>2</option> 
    </select> 
    <input type="submit" value="submit"/> 
</form> 
<div id="testDiv"></div> 


******JAVASCRIPT******* 

$(document).ready(function() { 
    $('[name=testform]').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/test.php', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('#testDiv').html('you chose ' + result); 
      } 
     }); 
    }); 
}); 

Answer 2

你的小提琴按預期工作！這是發生了什麼。

1. JavaScript是鉤住你的表格，並提交，防止它做什麼，它一般不會（正向你到URL中action=與表單字段數據）
2. 用戶點擊了在提交按鈕您的表格
3. 表單不會像平常一樣提交，但是您的JavaScript接管。
4. 您的JavaScript發送一個AJAX請求到/test - 這是取自JavaScript，而不是表格字段action=。
5. 服務器在的jsfiddle嘗試投放起來/test的內容，他們已經配置了回發錯誤
6. 您的JavaScript接收到錯誤的內容，並期待的東西，用它做。您尚未配置錯誤對象，因此它會丟棄錯誤。

嘗試編輯功能test()以下幾點：

function test() { 
    $('form').on('submit', function(e) { 
    e.preventDefault(); 
    var form = $(this); 
     $.ajax('/test', { 
     type: 'POST', 
     data: form.serialize(), 
     success: function(result) { 
      $('div').html('you chose ' + result); 
     }, 
     error: function(result) { 
      alert("an error!"); 
     } 
    }); 
    }); 
}; 

你會看到，你是從的jsfiddle找回一個錯誤。

在你的實際環境中，你需要的是一個服務器端腳本來處理事情。如果你發送了AJAX請求到test.php，代碼會將表單變量傳遞給服務器託管的test.php，test.php將對這些變量做一些處理並返回內容。

請記住，AJAX是一種與服務器通信的方式，而不僅僅是更新頁面的某些部分。您可以獲取信息，將其發送到服務器腳本，服務器腳本用這些信息執行某些操作，將修改後的數據發送回瀏覽器，然後使用該數據執行某些操作。