如何在div内发布后加载php页面及其输出?

时间:2013-12-31 20:08:30

标签: javascript php jquery ajax forms

我制作了代码来加载内容div中的页面;然而;当我想提交时,它在提交时不会重定向到div。我怎样才能做到这一点。

// test.php是索引

        <html>
          <head>
            <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
            <script type="text/javascript">
              $(document).ready(function(){
                $('#content').load('home.php');
                $('ul#menu li a').click(function(){
                  var page = $(this).attr('href');
                  $('#content').load(page + '.php');
                  return false;
                });
              });
            </script>
          </head>
          <body>
            <ul id="menu">
              <li><a href="home">Home</a></li>
              <li><a href="math">Math</a></li>
            </ul>
            Menu left
            <div id="content"></div>
            MenuRight
          </body>
        </html>

////////////////////// home.php是第一个链接和欢迎页面

   <?php
    echo "HOME PAGE";
   ?>

////////////////////// math.php是第二个链接,也是我遇到问题的链接。

   <?php
                if($_POST){
                    $a=$_POST['a'];
                    $b=$_POST['b'];
                    $c=$a+$b;
                    echo $c;
                }
                else{
                    echo"
                        <form name=f method=post                    action=math.php>
                            <input name=a>+<input name=b>=?
                            <input id='buttoncalc' name=calc type=submit value=Calc>
                        </form>
                    ";
                }
                ?>

谢谢。

1 个答案:

答案 0 :(得分:0)

你的意思是这个表格应该在ajax中运行吗?

$('#buttoncalc').on('click', function(e){
       e.preventDefault();
       var form = $(this).closest('form');

       $.post( form.attr('action') , form.serialize(), function( data ) {
            alert( "Data Loaded: " + data );
       });
});

功能点击不适用于动态创建的内容。您需要使用on()并通过post发送数据。收到后,您可以再次将其插入#content。