dshyu6866 2016-02-05 04:48
浏览 55
已采纳

单击“提交”按钮时如何仅加载内容区域?

My code is like this :

<html>
    <head>
        <title>Test Loading</title>
    </head>
    <body>
        <div id="header">
            This is header
        </div>
        <div id="navigation">
            This is navigation
        </div>
        <div id="content">
            <form action="test2.php" method="post">
                <table>
                    <tr>
                        <td>First Name</td>
                        <td>:</td>
                        <td><input type="text" name="first_name"></td>
                    </tr>
                    <tr>
                        <td>Last Name</td>
                        <td>:</td>
                        <td><input type="text" name="last_name"></td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>:</td>
                        <td><input type="text" name="age"></td>
                    </tr>
                    <tr>
                        <td>Hobby</td>
                        <td>:</td>
                        <td><input type="text" name="hobby"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td><input type="submit" Value="Submit"></td>
                    </tr>
                </table>

            </form>
        </div>
        <div id="footer">
            This is footer
        </div>
    </body>
</html>

The complete code of test1.php : http://pastebin.com/idcGms0h

The complete code of test2.php : http://pastebin.com/rvBPTrhn

I want to load only the content area and skip header, navigation and footer loading

Besides that, I also want to add loading

Seems to use ajax, but I am still confused

How to load only the content area when click submit button?

Any help much appreciated

Cheers

  • 写回答

3条回答 默认 最新

  • dsj2222222 2016-02-05 05:40
    关注

    you need to use ajax. please try this instead

    before submit

        <!DOCTYPE html>
    <html>
        <head>
            <title>Test Loading</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>
        <body>
            <div id="header">
                This is header
            </div>
            <div id="navigation">
                This is navigation
            </div>
            <div id="content">
                <form action=""  id="info">
                    <table>
                        <tr>
                            <td>First Name</td>
                            <td>:</td>
                            <td><input type="text" name="first_name"></td>
                        </tr>
                        <tr>
                            <td>Last Name</td>
                            <td>:</td>
                            <td><input type="text" name="last_name"></td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>:</td>
                            <td><input type="text" name="age"></td>
                        </tr>
                        <tr>
                            <td>Hobby</td>
                            <td>:</td>
                            <td><input type="text" name="hobby"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                             <td></td>
    
                        </tr>
                    </table>
    
                </form>
            </div>
           <button id="submit">Submit</button>
            <div id="footer">
                This is footer
            </div>
        </body>
    </html>
    
    <script type="text/javascript">
      var postData = "text";
      $('#submit').on('click',function(){
          $.ajax({
                type: "post",
                url: "test2.php",
                data:  $("#info").serialize(),
                contentType: "application/x-www-form-urlencoded",
                 success: function(response) { // on success..
                $('#content').html(response); // update the DIV
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            })
        });
    
    </script>
    

    before submit form

    test2.php contents

    <table>
                <tr>
                    <td>First Name</td>
                    <td>:</td>
                    <td> <?php echo $_POST['first_name']; ?></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td>:</td>
                    <td><?php echo $_POST['last_name']; ?></td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>:</td>
                    <td><?php echo $_POST['age']; ?></td>
                </tr>
                <tr>
                    <td>Hobby</td>
                    <td>:</td>
                    <td><?php echo $_POST['hobby']; ?></td>
                </tr>
    

    after submit form

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题