jQuery表單提交不刷新

我有一個表單，我想提交數據但不刷新頁面。我添加了停止刷新的代碼，但也停止了提交。有沒有辦法做到這一點，當使用preventDefault（）？jQuery表單提交不刷新

$("editUserForm").on('submit', function (e) { 
       e.preventDefault(); 

       $.ajax({ 
        url: this.action, 
        type: 'POST', 
        data: $("editUserForm").serialize() 

       }) 

      });

來源

2017-02-17 Chris R

您是否在控制檯中發現任何錯誤？ – j08691

如果這是實際的選擇器，那麼這個腳本不會執行任何操作 – Andreas

'$（「editUserForm」）'確保選擇器正確。 – TechVision

您的選擇將只選擇類型editUserForm的元素，如：

<editUserForm></editUserForm>

你可能意味着選擇形式，也by its id：

$("#editUserForm") 

<form id="editUserForm"></form>

或by its name attribute：

$("form[name='editUserForm']") 

<form name="editUserForm"></form>

來源

2017-02-17 15:25:20 JDB

使用錯誤的選擇器腳本不會有任何影響。但是：「我添加了停止刷新的代碼，但也停止了submit_」。因此這不是問題。 – Andreas

@Andreas是的，這絕對只是問題的一部分。可能是一個錯字，但由於它是第二次重複，我懷疑這一點。我認爲OP很困惑，但我只能解決這個問題中顯而易見的問題。 – JDB

@JDB我的選擇器看起來很健康。如果我刪除preventDefault表單提交。表單ID和名稱都是editUserForm –

這是使用ajax提交表單而不刷新頁面的代碼。

   <form name="addstudent" id="addstudent" action="add.php" method="post"> 

        <fieldset><legend>Add student to tutoring list</legend> 
        <div><label for="studentid">ID number</label><input type="text" name="studentid" id="studentid"></div> 


        <div><label for="assignment">Tutoring assignment</label><select name="assignment" id="assignment"> 
        <option value="">Please select an assignment</option> 
        <option value="att">Activity Time</option> 
        <option value="acc">ACC</option> 
        <option value="tech">ACC Tech </option> 
        <option value="ast">After School</option> 
        </select></div> 

        <div><label for="teacher">Assigning teacher</label><input type="text" name="teacher" id="teacher"></div> 

        <input type="submit" name="submit" value="submit" id="submit"> 
        </fieldset> 
        </form> 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
        <script> 
        $(document).ready(function(){ 

         $("body").on('submit',"#addstudent" ,function (e) { 
          e.preventDefault(); 

          $.ajax({ 
           url: $('#addstudent').attr('action'), 
           type: 'POST', 
           data: $("#addstudent").serialize(), 
           success: function(data) { 
            console.log(data); 
           } 
          }); 
         }); 
         });  

        </script>

來源

2017-02-17 17:28:35

jQuery表單提交不刷新

回答

相關問題