jQuery 使用ajax只在提交表单时重新加载div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12950884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
With ajax only reload div when submit Form
提问by souichiro
I have a simple FORM, one INPUTand one SUBMIT Button. The data from there will be sent to a PHP script, which sends this to a db and then puts it inside of an DIV. (with smarty)
Without the Ajax, it works just fine, the data goes to the db, it will be displayed and so on. But with Ajax, it would be faster and more lightweighted.
我有一个简单的FORM，一个INPUT和一个SUBMIT Button。来自那里的数据将发送到PHP脚本，该脚本将其发送到 db，然后将其放入DIV 中。（与 smarty）
没有 Ajax，它工作得很好，数据进入数据库，它会被显示等等。但是使用 Ajax，它会更快、更轻量级。
Normally, the submit reloads the Page or redirects to the page I defined.
But is there a way to just reload the DIV after doing the Submit?
通常，提交会重新加载页面或重定向到我定义的页面。
但是有没有办法在提交后重新加载 DIV？
The html:
html：
<div> <!-- THE DATA FROM THE FORM VIA PHP --> </div>
<form id='foo'>
<input type='text'>
<input type='submit'>
</form>
The JQuery so far:
到目前为止的 JQuery：
$('#foo').submit(function(event){
$.ajax({
url: 'index.html',
type: 'post,
data: $('#foo').serialize(),
success: function(response, textStatus, jqXHR){
console.log('worked fine');
},
error: function(jqXHR, textStatus, errorThrown){
console.log('error(s):'+textStatus, errorThrown);
}
});
});
回答by bipen
give ur div an id... add onsubmit="return false" so that form does not reload or it those nothig on submit
给你的 div 一个 id... 添加 onsubmit="return false" 以便表单不会重新加载或提交时没有那些
HTML
HTML
<div id="divID"> <!-- THE DATA FROM THE FORM VIA PHP --> </div>
<form id='foo' onsubmit="return false">
<input type='text' name="yourname">
<input type='submit'>
</form>
display the response in the html to which u gave an id.
在 html 中显示您提供 id 的响应。
JQUERY
查询
$('#foo').submit(function(event){
$.ajax({
url: 'index.php',
type: 'post',
dataType:'html', //expect return data as html from server
data: $('#foo').serialize(),
success: function(response, textStatus, jqXHR){
$('#divID').html(response); //select the id and put the response in the html
},
error: function(jqXHR, textStatus, errorThrown){
console.log('error(s):'+textStatus, errorThrown);
}
});
});
write ur html here... i am just printing the post variable here... u can use <table>(html) as required
在这里写你的 html...我只是在这里打印 post 变量...你可以<table>根据需要使用(html)
index.php
索引.php
echo $_POST['yourname'].
回答by user1755713
success:
成功：
function(response, textStatus, jqXHR){
do stuff here
},
such as: $("#mydiv").html(response);
如： $("#mydiv").html(response);
回答by David Michael Harrison
to stop the page reloading you're gonna wanna prevent default
停止页面重新加载你会想要阻止默认
$('#foo').submit(function(event){
event.preventDefault();
$.ajax({
url: 'index.html',
type: 'post,
data: $('#foo').serialize(),
success: function(response, textStatus, jqXHR){
console.log('worked fine');
// have the div update here $('div').html();
},
error: function(jqXHR, textStatus, errorThrown){
console.log('error(s):'+textStatus, errorThrown);
}
});
});
回答by Li-chih Wu
I think you are asking how to dynamic modify web content. Here is some sample code:
我想您是在问如何动态修改网页内容。下面是一些示例代码：
<html>
<head>
<script src="./jquery-1.8.2.js">
</script>
<script>
function test()
{
var test_div = $("#test_div");
test_div.html("hihihi");
}
</script>
</head>
<body>
<input type="button" onclick="javascript:test();" value="test"/>
<div id="test_div">
test_div here
</div>
</body>
</html>
You will need a server side script returning div contents as json or xml, then dynamic modifies the div contents with returned json/xml.
您将需要一个服务器端脚本将 div 内容返回为 json 或 xml，然后使用返回的 json/xml 动态修改 div 内容。
