用ajax發布表單並更新div
[英]Post form with ajax and update div
問題描述
我想發布帶有ajax的簡單表單並更新div的內容（id結果），但是我被重定向到server.php文件。
index.php：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.js：
$(document).ready(function showHint(form) {
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
server.php：
<?php
$input=$_POST;
//... compute something
echo "result";
?>
字符串“ result”應該在div中以id = result出現，但是我被重定向到/server.php，在那里我可以看到“ result”，為什么？
2 個解決方案
解決方案1
0 2014-06-23 17:24:29
的HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<form id="wbForm" action="server.php" method="POST">
Date1: <input type="text" name="date1" value="2000-01-21"><br>
Date2: <input type="text" name="date2" value="2000-01-02"><br>
<input type="submit" name="submit" value="Submit">
<div id="result"></div>
</form>
</body>
</html>
ajax.php
$(document).on("ready", function(){
//Form action
$("#wbForm").on("submit", function(event){
// Stop submit event
event.preventDefault();
$.ajax({
type:'POST',
url: 'server.php',
data:$('#wbForm').serialize(),
success: function(response) {
$('#wbForm').find('.result').html(response);
}});
});
});
server.php
<?php
$input = $_POST;
print_r( $input );
?>
快樂的外衣！
解決方案2
0 2014-06-23 17:41:36
有幾個問題。 首先，由於表單操作“ server.php”，您在單擊“提交”時將重定向到server.php。 如果您希望在單擊按鈕時進行AJAX調用，則應將AJAX調用放在JavaScript函數中，然后將該函數調用onclick（）
jQuery .AJAX調用未觸發成功的原因是因為它需要JSON。 嘗試：
<?php
header("content-type:application/json");
$input=$_POST;
//... compute something
echo json_encode("result");
?>
希望這可以幫助。
通過Ajax提交表單並更新結果div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.