2015-03-27 4 views
1

У меня есть простой HTML form, где пользователь может искать слово из базы данных и PHP вернуть результат как объект JSON, если это слово в базе данных.jQuery JSON возвращается с PHP

Странно, что объект возвращает JSON для слова, находящегося в базе данных при поиске пользователей, нажав на кнопку вместо нажатия клавиши ввода. У меня есть следующие две функции, которые нужно решать, когда пользователь нажимает клавишу ввода или нажимает кнопку для поиска. Как улучшить мой код, чтобы получить объект JSON от PHP, когда пользователь ищет, нажав клавишу ввода после того, как они набрали слово в текстовом поле?

$('#word-submit').on('click', function() { 
    var word = $('#word').val(); 
    $.post('ajax/name.php', {word: word}, function(data) { 
    var obj = jQuery.parseJSON(data); 
    console.log(obj); //I see the object in Chrome console log. 
    }); 

}); 

$('#word').keypress(function(e) { 
    if (e.which == 13) { 
    var word = $('#word').val(); 
    $.post('ajax/name.php', {word: word}, function(data) { 
     var obj = jQuery.parseJSON(data); 
     console.log(obj); //No object is return here. Why? May be something is wrong in my code. 
    }); 
    } 
}); 
<html> 

<head> 
    <title>Welcome</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
    <div id="container"> 
    <form> 
     <input type="text" id="word"> 
     <input type="button" id="word-submit" value="Search"> 

    </form> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script src="js/global.js" charset="UTF-8"></script> 
</body> 

</html> 

PHP скрипт работает нормально. Поэтому я не вставляю его здесь.

+0

Похоже, что с кодом нет ничего плохого, когда вы нажимаете enter, не обновляется браузер ?? –

+0

Да. Страница получает перезагрузку, когда я нажимаю клавишу ввода, но не тогда, когда я нажимаю на кнопку. Он просто извлекает результат и отображает его без перезагрузки страницы. – Zip

+0

можете ли вы поставить 'e.preventDefault();' внутри, если блок после первой скобки, и попытаться снова ввести –

ответ

1

Проблема, скорее всего, ваша форма отправляется. Я бы просто добавить один слушатель на форме-х представить событие, которое должно обрабатывать нажатия на кнопку и нажав Enter, например

$(form).on('submit', function(e) { 
    e.preventDefault(); // don't submit 
    var word = $('#word').val(); 
    $.post('ajax/name.php', {word: word}, function(data) { 
     console.log(data); 
    }, 'json'); 
}); 

В идеале, вы не должны разобрать JSON или даже сказать JQuery ответ тип данных (см. выше 'json'). Убедитесь, что ваш PHP скрипт что-то вроде этого ...

header('Content-type: application/json'); 
echo json_encode($someDataArrayOrObject); 
exit; 

Для того, чтобы сделать работу с кнопки выше, измените его тип submit, т.е.

<input type="submit" id="word-submit" value="Search"> 
+0

слава Богу. Отлично работает. – Zip

+0

@ Zip, пожалуйста. Мне пришлось добавить еще один вопрос о кнопке типа, так что, надеюсь, вы не пропустили это – Phil

0

кнопка работы, потому что это предотвращает автоматическую отправку/перезагрузку формы.

нажав клавишу ввода в этом текстовом поле, вызывая форму отправки, а затем перезагрузите ее самостоятельно, даже не запустив $('#word').keypress(function(e)).

+0

Нет, кнопка работала, потому что это не было 'type =" submit "' – Phil

+0

вопрос был о том, почему нажатие введите в текстовое поле, ничто при нажатии кнопки не работает. я пропустил читать тип submit, потому что его имя id подало в нем :) Извините за это. – rezashamdani

Смежные вопросы