阻止 javascript DOM 更新上的 HTTP 请求
我在点击表单按钮时重新执行导入的 js 文件，该按钮调用一个函数将 DOM 元素插入到页面中（模拟 ajx 回调函数的 exe）。 DOM 插入会导致页面刷新，从而重新从服务器请求所有文件。
函数调用没什么大不了的：
var addFashionVideo = function() {
var nodeContainer = document.getElementById('vidList');
var mytitle = document.forms.addVideo.newVidName.value;
var addTextNode = document.createTextNode(mytitle);
var newLI = document.createElement('LI');
newLI.appendChild(addTextNode);
nodeContainer.appendChild(newLI);
return this;
};
DOM更新代码的TARGET DIV是：
<div id="ajParent" class="aj" style="width:325px;background-color:blue;color:white;">
<ul id="vidList">
<li><a href="javascript://" title="FashVid-Paris">Watch Fashion Paris Video</a></li>
</ul>
</div>
我在此页面上放置一个警报，并在函数尝试插入新的LI之后 [奇怪的是，LI 出现一瞬间然后消失] 触发页面刷新 我在页面上的警报重新执行。
// 也许我这台计算机上有浏览器问题，或者我只是一个新的脚本编写者 // 看不到问题...任何评论表示赞赏。
I am getting re-execution of imported js files upon a hitting a form button which calls a function to insert a DOM element into page ( in simulation to exe of an ajx callback function). The DOM insertion causes a page refresh which re-requests all files from server.
Nothing big on the function call:
var addFashionVideo = function() {
var nodeContainer = document.getElementById('vidList');
var mytitle = document.forms.addVideo.newVidName.value;
var addTextNode = document.createTextNode(mytitle);
var newLI = document.createElement('LI');
newLI.appendChild(addTextNode);
nodeContainer.appendChild(newLI);
return this;
};
TARGET DIV for DOM update code is :
<div id="ajParent" class="aj" style="width:325px;background-color:blue;color:white;">
<ul id="vidList">
<li><a href="javascript://" title="FashVid-Paris">Watch Fashion Paris Video</a></li>
</ul>
</div>
I place an alert on this page and after the function attempts to insert the new LI
[ oddly the LI appears for a split second then disappears ] a page refresh is triggered
and my alert on the page re-executes.
// Perhaps Maybe I have a browser issue on this computer or I am just to new of a scripter
// to not see the problem...any comment appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当您在表单上点击“提交”时，页面将重新加载，因为您已经使用表单发出了 GET 请求。 为了阻止表单提交，您必须使其在提交时返回 false。 例如，
您必须确保禁用表单提交，以便页面不会重新加载，然后您可以在提交时运行您的ajax 请求，并在ajax 函数中成功执行您必须执行的操作。
我真的怀疑你的 dom 插入导致了重新加载。
The minute you hit submit on a form, the page will reload since you have made a GET request with the form. In order to stop the form from submitting you would have to make it return false on submit. e.g.
You would have to make sure to disable form submission so the page doesn't reload, then you could run your ajax request on submission and do what you must on success in the ajax function.
I really doubt your dom insertion is causing the reload.