Самый простой способ отправить форму без обновления

Question

Я пытался создать простой калькулятор. С помощью PHP мне удалось получить значения из полей ввода и перейти из меню POST, но, конечно, форма обновляется после отправки.

Используя Javascript, я пытался использовать

function changeText(){
document.getElementById('result').innerHTML = '<?php echo "$result";?>'

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

Поэтому я пытаюсь найти самый простой способ сделать это через ajax или что-то подобное

или для получения выбранных значений в меню переходов с помощью JavaScript.

Я читал некоторые примеры ajax онлайн, но они довольно запутанные (не знакомы с языком)

Answer 1

Используйте jQuery + JSON комбинацию для отправки формы примерно так:

test.php:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='_test.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

<div id='testDiv'>Result comes here..</div>

_test.php:

<?php
      $arr = array( 'testDiv' => $_POST['txt'] );
      echo json_encode( $arr );
?>

jsFile.js

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

Answer 2

Лучший способ сделать это с Ajax и jQuery

после того, как вы включили в свою библиотеку jQuery, используйте что-то вроде следующего

$('#someForm').submit(function(){
   var form = $(this);

   var serialized = form.serialize();

   $.post('ajax/register.php',{payload:serialized},function(response){
       //response is the result from the server.
       if(response)
       {
           //Place the response after the form and remove the form.
           form.after(response).remove();
       }
   });
   //Return false to prevent the page from changing.
   return false;
});

Ваш php будет таким.

<?php
    if($_POST)
    {
       /*
           Process data...
       */


       if($registration_ok)
       {
           echo '<div class="success">Thankyou</a>';
           die();
       }
    }
?>

Answer 3

Я использую новое окно.При сохранении я открываю новое окно, которое обрабатывает сохранение и закрывает загрузку.

window.open('save.php?value=' + document.editor.edit1.value, 'Saving...','status,width=200,height=200');

Файл php будет содержать метку тела с onload = "window.close ();"а до этого PHP-скрипт для сохранения содержимого моего редактора.

Возможно, он не очень безопасный, но простой, как вы и просили.Редактор сохраняет свою отмененную информацию и т. Д.