Question

我的代码是这样的：

lastKey()

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

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

我想只加载内容区域并跳过标题，导航和页脚加载

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

似乎使用ajax，但我仍然感到困惑

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

任何帮助非常感谢

干杯

Answer 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

Answer 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");
    });



})

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

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

3 个答案: