jQuery + AJAX для извлечения данных, отправленных типом отправки ввода

Question

Я хочу использовать функцию AJAX через jQuery, чтобы вернуть некоторые данные на мою домашнюю страницу. В настоящее время я использую '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'); 

Надеюсь, это вам поможет:

Ваш код, похоже, неверный. Ваше событие click закрывается до того, как будет выполнен вызов ajax.Также я думаю, что вы вызываете не тот файл.Страница действия для отправки формы: postCodeSearch.php , но в ajax вы звоните index.php

Код должен быть изменен на:

ФОРМА:

<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

откройте инструменты firebug / chrome dev и добавьте в вашу функцию успеха

console.log (php_output)

Answer 3

Ошибка: «#postcodeSearch» .val не является функцией

Использование:

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

вместо:

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

Answer 4

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

http://jsfiddle.net/Fgtzd/