2012-03-02 63 views
1

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

$("#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> 

回答

2

你做錯了花花公子:)

更改

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); 
      } 
     }); 
    }); 
}); 

希望這可以幫助您。 :)

+1

你可以嘗試調試螢火蟲中的ajax調用 – Sabari 2012-03-02 16:01:39

+0

去螢火蟲的網絡面板。檢查控制檯 – Sabari 2012-03-02 16:52:03

+0

是否有任何錯誤可以嘗試提醒輸出。我懷疑ajax調用是否返回空輸出。他們的任何網址,我可以檢查? – Sabari 2012-03-02 17:19:55

1

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

用途:

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

代替:

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

使用,而不是你的答案相同的代碼:-) – 2012-03-02 15:17:57

+0

@EvilP不,它不是。 '$'引用jQuery。請仔細閱讀。 – Smamatti 2012-03-02 15:19:14

+0

哦對不起,沒有仔細閱讀,確實專注於val ^。^抱歉花花公子 – 2012-03-02 15:20:03

1

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

的console.log(php_output)

+0

控制檯是空白的,只顯示「No活動到配置文件「 – 2012-03-02 15:22:39

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

http://jsfiddle.net/Fgtzd/

+0

此答案已在12分鐘前提供。 – Smamatti 2012-03-02 15:29:34

+0

@Rizwan Mumtaz:感謝您的迴應,特別是這個鏈接是一個很酷的網站,從未偶然發現過! – 2012-03-02 16:57:57