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

我的代码是这样的：如何在点击提交按钮时仅加载内容区域？

<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

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

除此之外，我还要加载加载

似乎使用阿贾克斯，但我仍然感到困惑

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

任何帮助非常赞赏

干杯

来源

2016-02-05 samuel toh

d ont使用'提交类型将其更改为按钮'。当你使用提交时，它会提交你的表单并重新加载页面。试试这个，如果结果是 – guradio

@guradio，Ok。谢谢 –

你需要使用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

来源

2016-02-05 05:40:49 SarangaR

它的工作。非常感谢你 –

你需要使用AJAX。仅更新页面的一部分。首先，给唯一ID的形成要素 1.我已经给了形式的ID regForm 2.提交按钮的ID提交按钮

你可以听提交表单或点击提交按钮的

在使用这个插件，你听提交按钮的点击....

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



})

来源

2016-02-05 05:13:43

那么你必须使用jquery AJX为书面方式一个很大的代码，你可以只使用这个插件http://malsup.com/jquery/form/的that.istead你不必须改变窗体的任何东西（除了设置窗体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">

来源

2016-02-05 05:34:13

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

回答

相关问题