为啥 jQuery Ajax 帖子会清除所有使用 load() 的 div？
Posted
技术标签:
【中文标题】为啥 jQuery Ajax 帖子会清除所有使用 load() 的 div？【英文标题】：Why is a jQuery Ajax post clearing all divs that have used load()?为什么 jQuery Ajax 帖子会清除所有使用 load() 的 div？ 【发布时间】：2011-07-01 16:29:18 【问题描述】：我在使用$.ajax 发布表单时遇到问题。我的应用程序是一个 ImageMap 和表单原型。我有一个工作流程，可以从图像地图的点击加载 div 中的图像到国家地图上的某个区域。此图像是一个国家/地区的另一个图像地图，它接受对地图上某个区域的点击。然后显示我的表单。
所有这些操作都会在一页上显示一个div 的结果，并在页面周围隔开。我的问题是表单提交。这是一个简单的表格，它从数据库中收集数据（目前只有一条记录）并填充一行以供选择性输入。这允许在服务器端收集数据。这一切听起来很正常！
Image of form on page through selection of Country
是的，这一切都显示出来了。打赌，我在表单上有一个$.ajax 帖子，所以在页面提交后它不会在页面上刷新。很酷，它确实将数据发布到 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" >
<img src="uluru.jpg" >
<img src="queensland.jpg" >
<img src="pelican.jpg" >
</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" />
<map id="_wMap" name="wMap">
<area shape="rect" coords="77,90,135,170"
id ="south_america_Lnk" href="Pages/includes/area2.php?image=SA"
title="South America"/>
<area shape="rect" coords="42,36,108,91" id ="north_america_Lnk"
href="Pages/includes/area2.php?image=NA"
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
为什么表单的帖子div area2 和div area3 都清空了？它应该只留下一个 Ajax 帖子的内容吗？我需要做些什么来保留页面内容，比如缓存吗？
问题 2
为什么我不能在 Ajax 表单发布后将数据加载到div area4 和 area3？这是最麻烦的。
我是这种 jQuery 编码的新手，所以我不知道我可能无意中造成的任何错误。
【问题讨论】：
你有我们都可以看的测试页吗？我认为识别您的问题可能更容易 嗨测试页是objectseale.com/HWT/Index.php。 【参考方案1】：问题1：点击类型为'submit'的按钮会提交一个同步请求（默认html行为），所以index.php会在表单提交后重新加载。提交前修改type为'button'或添加event.preventDefault()。
$(".submitFlights").live('click', function(event) event.preventDefault(); /// .... 其他 );问题2：与问题1相同
【讨论】：
以上是关于为啥 jQuery Ajax 帖子会清除所有使用 load() 的 div？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JQuery.ajax 从每个 WordPress 帖子中获取缩略图附件？
如何在 jQuery AJAX 调用中发送所有当前的帖子数据