单击提交按钮时如何仅加载内容区域？答案

【问题标题】：How to load only the content area when click submit button?单击提交按钮时如何仅加载内容区域？
【发布时间】：2016-02-05 13:40:49
【问题描述】：

我的代码是这样的：

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

test1.php完整代码：http://pastebin.com/idcGms0h

test2.php完整代码：http://pastebin.com/rvBPTrhn

我只想加载内容区域并跳过页眉、导航和页脚加载

除此之外，我还想添加加载

好像用ajax，但我还是一头雾水

点击提交按钮时如何只加载内容区？

非常感谢任何帮助

干杯

【问题讨论】：

不要使用type of submit change it to button。当您使用提交时，它将提交您的表单并重新加载页面。试试这个，如果结果是什么就回来
@guradio，好的。谢谢

标签： javascript php jquery html ajax

【解决方案1】：

你需要使用 ajax。请改用这个

提交前

    <!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 内容

<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】：

您需要使用 ajax 。只更新页面的一部分。首先，给形成元素的唯一 ID 1.我给了表格一个id regForm 2.提交按钮一个id submitButton

您可以收听表单提交或点击提交按钮

监听提交按钮的点击 ....

$("input#submitButton").on("click",function(event){
   event.preventDefault();
   var data = $('form#regForm').serialize();
   $.ajax({
           url: "test2.php",
           method: "POST",
           data: { data : data },
           dataType: "html"
   })

   .done(function( responseData ) {
       console.log("theresponse of the page is"+responseData);
       $("div#content").empty();
       ///now you can update the contents of the div...for now i have just entered text "hey i m edited" ....and i have considered that you will echo out html data on test2.php .....so specified data type as html in ajax.
       $("div#content").html("hey i m edited");
    })

   .fail(function( jqXHR, textStatus ) {
     console.log("error occured");
    });



})

【讨论】：

【解决方案3】：

好吧，你必须使用 jquery ajx 来实现。你可以使用这个插件http://malsup.com/jquery/form/，而不是编写一个大代码，当你使用这个插件时，你不必更改表单的任何内容（设置表单 ID 除外)

$(document).ready(function() { 
    var options = { 
        target:   '#output',   //this is the element that show respond after ajax finish

    }; 

    // bind to the form's submit event 
    $('#myForm').submit(function() {
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
});

像这样改变你的表单：

<form action="test2.php" method="post" id="myForm">

【讨论】：