Проблема с использованием jQuery-AJAX для отправки формы в PHP и отображения нового содержимого в div без обновления

Question

Я пытаюсь использовать jQuery-AJAX для отправки данных в моей форме на мой контроллер (index.php), где они обрабатываются PHP и вставляются через PDO в базу данных, если они действительны. После того, как код вставлен в базу данных, div, в котором ранее существовала форма, должен быть заменен содержимым другой страницы (newpage.php). Исходная страница не должна обновляться при отправке формы, должна обновляться только div, в которой ранее существовала форма. В моем коде есть особая проблема, хотя я не могу найти, где проблема:

Вот мой JQuery:

<script type="text/javascript">

    function processForm() {
    var action= $('#action').val();
    var data = $('#data').val();
    var dataString = 'action=' + action + '&data=' + data;

$.ajax ({
    type: "POST",
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
        }
    });
}
</script>

Вот мой HTML: (В качестве примечания я заметил, что когда я беру «return false;» из HTML, форма будет отправлена ​​в мою базу данных, но вся страница также перезагрузится - и будет пустой Когда я оставляю «return false;» в HTML, newpage.php корректно загружается в div, но данные не попадают в базу данных)

<form action="" method="post" onsubmit="processForm();return false;">

    <input type="hidden" name="action" value="action1" />
    <input type="text" name="data" id="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

Вот мой PHP:

<?php
$action = $_POST['action'];

switch ($action) {
    case 'action1':
        $data = $_POST['data'];

        pdo ($data);

    exit;
}
?>

Мне кажется, что я где-то совершаю глупую ошибку, но просто не могу понять, как это сделать. Спасибо за любую помощь, вы можете предоставить!

РЕШЕНИЕ (через Джен):

JQuery:

<script type="text/javascript">
    function processForm() {
        var dataString = $("#yourForm").serialize();

    $.ajax ({
    type: 'POST',
    url: ".",
    data: dataString,
    success: function(){
            $('#content_main').load('newpage.php');
          }
        });
    return false;
    });
</script>

HTML:

<form id="yourForm">

    <input type="hidden" name="action" value="action1" />
    <input type="text" id="data" name="data" />

    <input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

PHP:

<?php
    $action = $_POST['action'];

    switch ($action) {
        case 'action1':
            $data = $_POST['data'];

            pdo ($data);

        exit;
    }
?>

Что я выучил: используйте метод .serialize () jQuery, если это опция, так как это сэкономит кучу времени, записывая var для каждого значения формы, а .serialize () обычно не делает ошибок при отправке информация по тел.

Answer 1

Попробуйте:

 $("#yourForm").submit(function(){


  // Could use just this line and not vars below      
  //dataString = $("#yourForm").serialize(); 

  // vars are being set by selecting inputs by id but id not set in form fields
  var action= $('#action').val(); // value of id='action' 
  var data = $('#data').val();    // value of id='data'
  var dataString = 'action=' + action + '&data=' + data;
  // dataString = 'action=&data=' so nothing is posted to db
  // because input fields cannot be found by id
  // fix by adding id fields to form fields

   $.ajax ({
   type: "POST",
   url: ".",
   data: dataString,
   success: function(){
        $('#content_main').load('newpage.php');
    }
   });
return false; 
});

И измените форму на (я добавил атрибуты id):

<form id="yourForm">
<input type="hidden" id="action" name="action" value="action1" />
<input type="text" id="data" name="data" id="data" />

<input type="submit" value="CONTINUE TO STEP 2" name="submit" />

</form>

Answer 2

Похоже, вам нужно объяснение, а не исправление кода.Вот краткое объяснение двух случаев:

1. Когда вы вынимаете return false;, код будет обрабатывать вашу форму как обычную HTML-форму, которая будет отправлена ​​на сервер через action="", что ведет в никуда.Javascript, однако, также делает свою работу в этом случае, но поскольку страница перенаправлена ​​в никуда, в конце она становится пустой.

2. Когда вы ставите return false;Возвращаясь к форме, форма будет перехватывать обработчик события и знать, что эта форма будет возвращена ЛОЖНО для отправки.Вот почему вы можете видеть, как ваш код Javascript делает свою работу.Однако следует заметить, что вашей функции jQuery AJAX требуется POST (или GET) для обработки файла, а не '.'

Учитывая этот ответ на основенет знания вашей реальной ситуации.Вам нужно просмотреть свой код и посмотреть, как вы можете его редактировать.Буду рад ответить, если у вас есть какие-либо вопросы.

Надеюсь, этот небольшой совет поможет (: