我在使用 $.ajax 发布表单时遇到问题。我的应用程序是一个 ImageMap 和表单原型(prototype)。我有一个工作流程，可以将图像加载到 div 中，从图像 map 单击到国家 map 上的某个区域。这个图像是一个国家，另一个图像 map 接受点击 map 上的一个区域。然后显示我的表单。
所有这些操作都在一页上的 div 中显示结果，并在页面周围隔开。我的问题是表单提交。这是一个简单的表格，它从数据库中收集数据(目前只有一条记录)并填写一行以供选择性输入。这允许在服务器端收集数据。这一切听起来都很正常!
Image of form on page through selection of Country
是的，这一切都显示出来了。打赌，我在表单上有一个 $.ajax Post，所以在页面提交后它不会在页面上刷新。很酷，它确实将数据发布到 PHP 页面(我检查了输出)，但是？提交后，先前加载的国家/地区 div 的内容将被清除。任何 load() 新页面或 div 中的 HTML 的尝试都会失败。
<html>
<head>
<title>Online Flights</title>
<link rel="stylesheet" type="text/css" href="Main.css" />
<script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('area').bind('click mouseover', function() {
var id = $(this).attr('id');
var subStrEnd = id.length - 4;
var countryDiv = id.substring(0, subStrEnd);
var href = $(this).attr('href');
$('#area2').load( href + ' #' + countryDiv).css({ opacity: 0 }).fadeTo("slow",1);
return false;
});
$('.countryItem').live('click', function() {
var id = $(this).attr('id');
$('#area3').load(id).css({ opacity: 0 }).fadeTo("slow",1);
return false;
});
$(".submitFlights").live('click', function() {
var name = 'testname';
var email = 'as@erdd.com';
var phone = '02987374754';
var dataString = 'action=add' + '&name='+ name + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "Pages/includes/area4.php",
data: dataString,
success: function() {
// alert(dataString);
$('#area3').html("<h2>New Flight Requested</h2>");
$('#area3').show();
// console.log($('#area4').html());
// alert(dataString);
}
});
$('#area4').load("Pages/includes/area4.php");
console.log($('#area4').html());
});
});
</script>
</head>
<body>
<div id="pageHeader">
<img src="LogoSmall.png" alt="Logo">
<img src="uluru.jpg" alt="Uluru">
<img src="queensland.jpg" alt="Queensland">
<img src="pelican.jpg" alt="Pelicans West Australia">
</div>
<div id="area1">
<div style="text-align:center; width:350px; margin-left:auto; margin-right:auto;">
<img id="wMap" src="WMGreen.png" usemap="#wMap" border="0" width="350" height="175" alt="" />
<map id="_wMap" name="wMap">
<area shape="rect" coords="77,90,135,170"
id ="south_america_Lnk" href="Pages/includes/area2.php?image=SA"
alt="South America" title="South America"/>
<area shape="rect" coords="42,36,108,91" id ="north_america_Lnk"
href="Pages/includes/area2.php?image=NA"
alt="North America" title="North America" />
</map>
</div>
</div>
<div id="area2">
</div>
<div id="area3">
</div>
<div id="area4">
</div>
</body>
</html>
我将 live 用于加载的 div area2(调用 ab 事件加载 div area3)和 area3 中的提交按钮类。
此外，当我提交表单时，该行会闪烁一秒钟，然后随着区域 2 中加载的内容消失。
$('#area3').html("<h2>New Flight Requested</h2>");
Form submit, it cleared the divs, and failed on load new content into divs
问题1
为什么表单的post把div area2和div area3都清除了？它应该只留下一个 Ajax post 的内容吗？我需要做些什么来像缓存一样保留页面内容吗？
问题2
为什么我不能在Ajax 表单提交后加载数据到div area4 和area3？这是最麻烦的。
我是这种 jQuery 编码的新手，所以我不知道我可能无意中造成的任何错误。
最佳答案
问题 1:单击类型为“提交”的按钮将提交同步请求(默认 html 行为)，因此 index.php 将在表单提交后重新加载。提交前修改类型为'button'或添加event.preventDefault()。
$(".submitFlights").live('click', function(event) {
event.preventDefault();
/// .... others
});
问题2:同问题1
关于html - 为什么 jQuery Ajax 帖子会清除所有使用过 load() 的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5073206/