完整的JavaScript Ajax PHP混淆

Question

大家好我正在開發一個Codeigniter網站，我有一個表單，我張貼使用PHP，這是絕對好的。不過，我在我的頁面上使用了一個小的下拉菜單來跳轉頁面 - 爲了做到這一點，我只是使用href並在URL中傳遞變量。

但是，當他們點擊鏈接時，我需要POST一些數據。我不希望使用一個按鈕，並想知道是否可以使用ajax onclick（）事件來實現？ - 我需要發佈的數據在表單中。代碼結構大致是：

<form action="main/postback" method="post"> 
<input type="hidden" name="pagereference" value="2" /> 
<input type="hidden" name="supervariable" value="7" /> 
First name: <input type="text" name="firstname"><br> 
Last name: <input type="text" name="lastname"> 

</form> 
<div> 
<ul> 
<li><a href = 'http:localhost/landing'>click me</a></li> 
</ul> 
</div> 

當有人點擊我要發送一個Ajax POST請求鏈接，但在PHP文件，我張貼我希望能夠從內檢索數據的數據形成。這可能嗎？如果有的話，請提供一個示例AJAX請求，以及如何檢索PHP中的數據，因爲我很困惑。我試過如下：

<li><a onclick='myFunction()'>click me</a></li> 


<script type="text/javascript"> 
       function myFunction() 
       { 
        var "test"; 
        $.ajax({ 
          type: "POST", 
          url: "http://localhost/ciproject/assessment/test", 
          dataType: String, 
          success: function(msg){ 
           alert("Data Saved: " + msg); //Anything you want 
          } 
         }); 
        window.alert("TEST"); 
       } 
      </script> 

任何想法，將不勝感激，非常感謝

Answer 1

你可能會遇到使用完整的網址（域名）由於CORS問題，所以我建議刪除這一點，但你可以很容易地做你想要使用什麼樣的東西，如：

<li><a class="postFormLink">click me</a></li> 

<script type="text/javascript"> 
$('.postFormLink').on('click', function() { 
    $.ajax({ 
     type: "POST", 
     url: "/ciproject/assessment/test", 
     data: $('form').serialize(), 
     success: function(msg){ 
      alert("Data Saved: " + msg); //Anything you want 
     } 
    }); 
    window.alert("TEST"); 
} 
</script> 

如果您的頁面上有多個表單，您應該添加一個ID或一個類別來定位它，而不是使用$('form')。

請注意，我也刪除了內聯事件處理程序。

Answer 2

以下應該工作，如果你把它放到你的Ajax選項。你需要識別你的表格，最簡單的方法是使用一個id。

data: $("#theFormId").serialize() 

Answer 3

嘗試以下操作：

<form action="main/postback" method="post" id="form1"> 
    <input type="hidden" name="pagereference" value="2" /> 
    <input type="hidden" name="supervariable" value="7" /> 
    First name: <input type="text" name="firstname"><br> 
    Last name: <input type="text" name="lastname"> 
</form> 

<li><a id="clickme">click me</a></li> 


<script type="text/javascript"> 

$(function() { 
    $("#clickme").click(function() { 

    var form_data = $('#form1').serialize(); 

    $.ajax({ 
     type: "POST", 
     dataType: "text", 
     url: "ciproject/assessment/test", 
     data: form_data, 
     success: function(response){ 
      alert('Job well done'); 
     } 

    }) 

    }) 
}) 
</script>