jquery $ .ajax不起作用。成形後的

Question

我想使用jQuery發送表單數據到服務器， 我按照這個頁面↓

how do i submit a form using get method in jquery。

但不工作，沒有任何窗口警報。 我不知道爲什麼....

我已經導入頭（版本1.11.3）中的jQuery腳本。

<script src="./static/jquery-1.11.3.js" type="text/javascript"></script> 

這是我的腳本。

<script> 
    function test(){ 
      document.getElementById("form_test").submit(function() { 
       $.ajax({ 
        url  : $(this).attr('action'), 
        type : $(this).attr('method'), 
        data : $(this).serialize(), 
        success : function(response) { 
         alert(response); 
        }, 
        error:function(){ 
         alert("error"); 
        } 
       }); 
       return false; 
      }); 
     } 
</script> 

這是我的表單代碼。

<form id="form_test" class="appnitro" method="post" action=""> 
    <div class="form_description"> 
     <p>test.</p> 
    </div>      
    <ul > 
     <li id="li_1" > 
      <label class="description" for="info">info</label> 
      <div> 
       <input id="info" name="info" class="setInfo" type="text" maxlength="16" value=""/> 
       <label id="infoMsg" class="Message"></label><br/> 
      </div> 
     </li>   
     <li class="buttons"> 
      <button type="button" class="mbutton" onclick="test()">submit</button> 
     </li> 
    </ul> 
</form> 

Answer 1

從test()

document.getElementById("form_test").submit(function() { 

刪除提交處理程序

這不是必需的，因爲當用戶單擊按鈕時正在調用功能test。

function test() { 
    var $form = $('#form_test'); 
    $.ajax({ 
     url: $form.attr('action'), 
     type: $form.attr('method'), 
     data: $form.serialize(), 
     success: function (response) { 
      alert(response); 
     }, 
     error: function() { 
      alert("error"); 
     } 
    }); 
    return false; 
} 

我也建議你使用jQuery on()當您使用內聯JS在提交按鈕，無需提交事件處理此綁定事件

$('#form_test').on('submit', function() { 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     data: $(this).serialize(), 
     success: function (response) { 
      alert(response); 
     }, 
     error: function() { 
      alert("error"); 
     } 
    }); 
    return false; 
}); 

Answer 2

你需要有一個表單提交在DOM準備處理

$(function() { 
    $("#form_test").submit(function() { 
     $.ajax({ 
      url: $(this).attr('action'), 
      type: $(this).attr('method'), 
      data: $(this).serialize(), 
      success: function (response) { 
       alert(response); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
     return false; 
    }); 
}) 

在代碼中，您呼叫按鈕的點擊test方法，它調用form元素註冊的事件處理程序提交功能與回調

Answer 3

。請參見下面的代碼：

<script> 
function test(){ 
     var myForm = document.getElementById("form_test");    
      $.ajax({ 
       url  : $(myForm).attr('action'), 
       type : $(myForm).attr('method'), 
       data : $(myForm).serialize(), 
       success : function(response) { 
        alert(response); 
       }, 
       error:function(){ 
        alert("error"); 
       } 
      }); 
      return false; 

    }