Как заставить PHP возвращать JSON для отправки встроенной формы? - PullRequest
Новая
       5

Как заставить PHP возвращать JSON для отправки встроенной формы?

0 голосов
/ 22 марта 2012

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

Проще говоря, я пытаюсь отправить свою форму через AJAX в скрипт PHP, который возвращает JSON.Затем я выполняю действия на стороне клиента, основываясь на результате отправки (например, отображение ошибок).Тем не менее, все, что я получаю, это мой вывод PHP-скрипта - он не возвращается к моему AJAX-запросу.

Вот моя форма: 

<form id="storyform" name="storyform" method="post" action="submitform.php" class="story-form" enctype="multipart/form-data">

    <fieldset name="summary">
        <legend>Your Story <span class="required">(required)</span></legend>

        <p><label for="title">What is your story about?</label>
        <input type="text" id="title" value="" tabindex="" name="title" /></p>

        <p><label for="description">What happened?</label>
        <textarea id="description" tabindex="" name="description" cols="80" rows="10"></textarea></p>
    </fieldset>

</form>

Вот jQuery, который обрабатывает AJAXотправка: 

  jQuery("#storyform").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault(); 

    /* get some values from elements on the page: */
    var $form = $( this ),
        url = $form.attr( 'action' ),
        postData = {
            "title" = $form.find( '#title' ).val(),
            "description" = $form.find('#description').val()
        };

    /* Send the data using post and put the results in a div */
    jQuery.ajax({
        type: "POST",
        url: url,
        data: postData,
        success: function(response){
            jQuery('#result').empty().append(response);
        }
    });
  });

У меня есть div с идентификатором "result" после моей формы ...

Затем, submitform.php имеет; 

if (!empty($_POST['title'])) {
    $new_post['post_title'] =  sanitize($_POST['title'], '');
} else {
    $errors['title'] = 'empty';
}

// Sanitise and prep the description
if (!empty($_POST['description'])){
    $new_post['post_content'] = sanitize($_POST['description']);
} else {
    $errors['description'] = 'empty';
}
echo json_encode($errors);

При отправке формы я ожидаю увидеть мой #results div, заполненный JSON из submitform.php.Вместо этого меня просто отправляют в файл submitform.php вдали от моей формы, и все, что я вижу, - это повторение JSON.

Как мне вернуть JSON, чтобы я мог выполнять действия, основываясь на его содержимом

Ответы [ 5 ]

4 голосов
/ 22 марта 2012

У вас есть ошибка Javascript в функции обратного вызова для вашего обработчика событий submit, что, вероятно, приводит к тому, что обработчик событий никогда не привязывается, а отправка формы продолжается как обычно (давая вам результаты, которые вы не ожидали).

Это: 

postData = {
    "title" = $form.find( '#title' ).val(),
    "description" = $form.find('#description').val()
};

является неправильной нотацией объекта.key и value должны быть разделены двоеточием (:), а не знаком равенства (=), и ключ не должен иметь кавычек, поэтому измените его на: 

postData = {
    title : $form.find( '#title' ).val(),
    description : $form.find('#description').val()
};
0 голосов
/ 22 марта 2012

Я исправил это сам, но спасибо за помощь от других, которые помогли мне в конце концов туда добраться.

Похоже, это был просто случай обернуть мой JS в document.readyПримерно так: 

jQuery(document).ready(function($){
    jQuery("#storyform").submit(function(event) {

        /* stop form from submitting normally */
        event.preventDefault(); 

        /* get some values from elements on the page: */
        var $form = $( this ),
            url = $form.attr( 'action' ),
            postData = {
                title: $form.find( '#title' ).val(),
                description: $form.find('#description').val(),
                js: 'true'
            };

        /* Send the data using post and put the results in a div */
        jQuery.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(response){
                jQuery('#result').empty().append(response);
            }
        });
    });
});

Мой предыдущий скрипт вообще не запускался, потому что он работал до того, как форма была обработана.Я убедился, что ответ возвращается, распечатав его в виде предупреждения.

0 голосов
/ 22 марта 2012

Так как вы говорите, что ваш javascript не запускается .. Вы звонили jQuery.noConflict()?

Также убедитесь, что ваш ввод данных (не показан в вашей форме) не имеет name="submit", в противном случае метод jQuery submit() не будет работать.

0 голосов
/ 22 марта 2012

В вашем javascript сделайте это: 

var postData = $form.serialize();

Кроме того, вы можете выполнить эти проверки на стороне клиента, прежде чем переходить на сторону сервера (если вы не хотите что-то действительно защищенное). Используйте плагин для валидации .

0 голосов
/ 22 марта 2012

Используйте этот шаблон, если вы действительно хотите получить json в правильном типе контента: 

// Convert to JSON
$json = json_encode($data);

// Set content type
header('Content-type: application/json');

// Prevent caching
header('Expires: 0');

// Send Response
print($json);
exit;
...