使表单无需刷新即可轻松提交

时间:2010-09-08 10:49:33

标签: php javascript ajax forms webforms

我一直在尝试创建一个简单的计算器。使用PHP我设法从POST输入字段和跳转菜单中获取值,但当然表单在提交时刷新。

使用Javascript我尝试使用

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

但点击按钮后会继续给出“0”的答案,因为由于表格尚未提交,因此无法从POST获取值。

所以我试图找出通过ajax或类似方法做到最简单的方法

或使用JavaScript获取跳转菜单上的选定值。

我已经在线阅读了一些ajax示例,但它们很混乱(不熟悉该语言)

3 个答案:

答案 0 :(得分:7)

执行此操作的最佳方法是使用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();
       }
    }
?>

答案 1 :(得分:7)

使用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;
    });

});

答案 2 :(得分:0)

我使用了一个新窗口。保存后,我打开一个新窗口,处理保存并关闭onload。

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

php文件将包含一个带有onload =“window.close();”的bodytag。在此之前,PHP脚本保存我的编辑器的内容。

它可能不是很安全,但它的要求很简单。编辑器会保留其撤消信息等。