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 echarts图表制作
  • ¥15 halcon根据玻璃面板纹路取区域
  • ¥15 HFSS设计小型化180度耦合器
  • ¥15 使用CInternetSession，CHttpFile读取网页文件时有些电脑上会卡住怎么办？
  • ¥15 水下机器人的半物理仿真研究
  • ¥15 微服务假死，一段时间后自动恢复，如何排查处理
  • ¥50 webrtc-streamer TCP rtsp
  • ¥15 cplex运行后参数报错是为什么
  • ¥15 之前不小心删了pycharm的文件，后面重新安装之后软件打不开了
  • ¥15 vue3获取动态宽度，刷新后动态宽度值为0