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条)

报告相同问题？

悬赏问题

  • ¥20 eclipse连接sap后代码跑出来空白
  • ¥20 谁能帮我挨个解读这个php语言编的代码什么意思？
  • ¥15 win10权限管理，限制普通用户使用删除功能
  • ¥15 minnio内存占用过大，内存没被回收（Windows环境）
  • ¥65 抖音咸鱼付款链接转码支付宝
  • ¥15 ubuntu22.04上安装ursim-3.15.8.106339遇到的问题
  • ¥15 blast算法（相关搜索：数据库）
  • ¥15 请问有人会紧聚焦相关的matlab知识嘛？
  • ¥15 网络通信安全解决方案
  • ¥50 yalmip+Gurobi