2015-03-14 3 views
4

Я пытаюсь отправить переменные на ту же страницу, что и вызов AJAX.Ajax to PHP на той же странице

Я получаю успешный результат, только если я отделяю PHP-скрипт (например, process.php и соответственно изменяю AJAX url).

index.php 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
    $(function() { 
     $('form').submit(function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       type  : 'POST', 
       url   : 'index.php', 
       data  : $(this).serialize(), 
       dataType : 'json', 
       encode  : true 
      }) 
      .done(function(data) { 
       $('#result').html(data);  
      }) 
     }); 
    }); 
</script> 
</head> 

<body> 
<?php 
    $data = array(); 
    if(isset($_POST['name'])) { 
     $data = 'You entered: ' . $_POST['name'];  
     echo json_encode($data);   
    } 
?> 
    <form> 
     <input type="text" name="name"> 
     <input type="submit" value="Submit"> 
    </form> 

    <div id="result"></div> 
</body> 

Возможно ли для той же страницы захватывать и обрабатывать переменные, которые мы передаем с использованием AJAX?

ответ

4

Вы устанавливаете dataType : json в настройках AJAX, так что вы должны echojson object вместо String (HTML).
Используйте exit() вместо echo и поместите свой PHP в самую верхнюю часть страницы. Так, чтобы HTML не был эхом, прежде чем вы проверите, существует ли $_POST['name'].

Другое дело в том, что ваш $data = array() преобразуется в строку в этой строке:

$data = 'You entered:' . $_POST['name']; 

должно быть $data[] = ...

<?php 
    $data = array(); 
    if(isset($_POST['name'])) { 
     $data[] = 'You entered:' . $_POST['name']; 
     exit(json_encode($data));  
    } 
?> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
    $(function() { 
     $('form').submit(function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       type  : 'POST', 
       url   : 'index.php', 
       data  : $(this).serialize(), 
       dataType : 'json', 
       encode  : true 
      }) 
      .done(function(data) { 
       $('#result').html(data);  
      }) 
     }); 
    }); 
</script> 
</head> 

<body> 
    <form> 
     <input type="text" name="name"> 
     <input type="submit" value="Submit"> 
    </form> 
    <div id="result"></div> 
</body> 
+1

Спасибо, это работает. – blsn

0

Добавить die(); function И используйте $ _SERVER ['HTTP_X_REQUESTED_WITH'], которые обнаруживают запрос ajax. АЛОС поставил Serialize) из стороны (Аякс функции для получения данных

var data = ''; 
    $(function() { 
    $('form').submit(function(e) { 
     e.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type  : 'POST', 
      url   : 'index.php', 
      data  : data, 
      dataType : 'json', 
      encode  : true 
     }) 
     .done(function(data) { 
      $('#result').html(data);  
     }) 
    }); 
}); 


<?php 

    $data = array(); 
    if(isset($_POST['name']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])) { 
    $data = 'You entered: ' . $_POST['name'];  
    echo json_encode($data); 
    die();  
    } 
?> 
+0

Это не работает, спасибо. – blsn

+0

@blsn проверить мой обновленный ответ .. если с POST он не работает, попробуйте с методом get –

+0

еще раз спасибо, но это также не работает. – blsn

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