單擊提交按鈕時如何僅加載內容區域？
[英]How to load only the content area when click submit button?
問題描述
我的代碼是這樣的：
<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，但是我還是很困惑
單擊提交按鈕時如何僅加載內容區域？
任何幫助，不勝感激
干杯
3 個解決方案
解決方案1
1 已采納 2016-02-05 05:40:49
您需要使用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>
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>
解決方案2
0 2016-02-05 05:13:43
您需要使用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
0 2016-02-05 05:34:13
好吧，您必須為此使用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">
文本區域包含內容並打開鍵盤時，按鈕單擊不起作用
[英]Button click not working when text area has content and keyboard is opened
Formik 觸發錯誤並觸及非提交類型的按鈕點擊。 我們如何僅在單擊（type =“submit”）按鈕時觸發
[英]Formik triggering errors and touched on non submit type button click. How can we only trigger when (type="submit") button clicked
如何使用Enter鍵將項目添加到輸入中，並且僅在單擊按鈕時才提交表單？
[英]How can I add items to an input using the enter key and only submit the form when i click a button?
在與Aurelia相同的區域中單擊按鈕時，如何切換頁面上的內容區域？
[英]How can I switch out the content area on a page on a button click in the same area with Aurelia?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.