jQuery + AJAX檢索輸入提交類型發送的數據

Question

我想通過jQuery使用AJAX函數將一些數據返回到我的主頁。目前，我正在將表單上的'action ='用於外部PHP文件，以檢查數據是否正在發送。我現在想使用AJAX將這些數據返回到我的主頁上的div。我有這樣的代碼，但目前它沒有返回任何數據：

$("#ticketSearch").click(function(e) { 
    e.preventDefault(); 
    var eNameData = ("#postcodeSearch").val(); 
     alert('#ticketSearch clicked'); //this alert doesn't even work! 

    var dataToSend = 'postcodeSearch=' + eNameData; 

    $.ajax({     
     url: "index.php", 
     type: "POST", 
     data: dataToSend,  
     cache: false, 
     success: function(php_output) 
      { 
      $("#ticketResults").html(php_output).show(); 
      } 
    }); 
}); 

的形式代碼：

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm" method="post" action="postCodeSearch.php"> // the action method needs to be taken out 

     <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

     <input type="submit" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form> 

任何幫助非常感謝，我想我是在正確的路線，但東西只是不正​​確！ 謝謝。

編輯：新代碼：

$(document).ready(function() { 
    $("#ticketSearch").click(function(e) { 
alert("click"); 
e.preventDefault(); 
var eNameData = $("#postcodeSearch").val(); 
alert('eNameData'); 
}); 

var dataToSend = 'postcodeSearch=' + eNameData; 

    $.ajax({     
     url: "index.php", 
     type: "POST", 
     data: dataToSend,  
     cache: false, 
     success: function(php_output) 
      { 
      $("#ticketResults").html(php_output); 
      alert("#ticketResults"); 
      } 
    }); 
}); 

形式：

 <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

     <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 


    </form> 

Answer 1

你做錯了花花公子:)

更改

var eNameData = ("#postcodeSearch").val(); 

到

var eNameData = $("#postcodeSearch").val(); 

我不知道爲什麼你使用alert('#ticketSearch clicked');。

它的用途是什麼。如果您需要提醒的數據postcodeSearch，

然後就去做

alert(eNameData'); 

希望這有助於你:)

編輯：

你的代碼似乎是錯的，你點擊事件在ajax調用完成之前關閉。另外我認爲你正在調用錯誤的文件。您的表單提交操作頁面爲postCodeSearch。PHP但在阿賈克斯你調用index.php

您的代碼應改爲：

FORM：

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm" method="post" action="postCodeSearch.php"> // the action method needs to be taken out 

     <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

     <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form> 

JS：

$(document).ready(function() { 
    $("#ticketSearch").click(function(e) { 
     var eNameData = $("#postcodeSearch").val(); 
     var dataToSend = 'postcodeSearch=' + eNameData; 

     $.ajax({     
      url: "postCodeSearch.php", 
      type: "POST", 
      data: dataToSend,  
      cache: false, 
      success: function(php_output) { 
       $("#ticketResults").html(php_output); 
      } 
     }); 
    }); 
}); 

希望這可以幫助您。 :)

Answer 2

錯誤： 「#postcodeSearch」 .VAL不是一個函數

用途：

var eNameData = $("#postcodeSearch").val(); 

代替：

var eNameData = ("#postcodeSearch").val(); 

Answer 3

打開Firebug/Chrome瀏覽器開發工具，並在您的成功函數把

的console.log（php_output）

Answer 4

var eNameData = $("#postcodeSearch").val(); 

http://jsfiddle.net/Fgtzd/