Ajax调用后JS不生效的问题及解决办法

最新推荐文章于 2021-08-06 16:36:46 发布

金生水起sky

最新推荐文章于 2021-08-06 16:36:46 发布

阅读量2.2k

点赞数

分类专栏： Ajax Javascript 文章标签： javascript java 开发工具 ViewUI

本文链接：https://blog.csdn.net/freesky_zh/article/details/84355757

版权

Ajax Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

a.jsp通过Ajax调用b.jsp，然后返回b.jsp的内容显示在a.jsp中。现在遇到一个问题，就是在b.jsp中定义了js，在a.jsp中click button并没有调用该js。在firefox中通过Firebug查看源代码。把它保存成html或jsp，js都可以被调用。源代码如下：
-----a.jsp-----------------------
<%@ page language="java" contentType="text/html" %>
<%
   String tt = "Title";
%>
<%=tt %>
<button id="getContent" name="getContent" οnclick="getContent();">Get Content</button>
<p></p>
<div id="myDiv">
</div>
<p></p>
End
<script type="text/javascript">
xmlhttp = new XMLHttpRequest();
function getContent() {
xmlhttp.open("POST","b.jsp",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
}
</script>
--------------------b.jsp-------------------------
<%@ page language="java" contentType="text/html" %>
<%
String aa = "To include jsp";
%>
<%=aa %> <br />
<input id="myname" name="myname" />
<button id="getName" name="getName" οnclick="getName();">Get Name</button>
<script type="text/javascript">
function getName() {
alert("ok");
document.getElementById("myname").value = 'Bill';
}
</script>
---------------------src.html---------------------------
<html><head></head><body>Title
<button οnclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv">
To include jsp <br>
<input name="myname" id="myname">
<button οnclick="getName();" name="getName" id="getName">Get Name</button>
<script type="text/javascript">
function getName() {
alert("ok");
document.getElementById("myname").value = 'Bill';
}
</script></div>
<p></p>
End
<script type="text/javascript">
xmlhttp = new XMLHttpRequest();
function getContent() {
xmlhttp.open("POST","b.jsp",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
}
</script>
</body></html>
-----------------------End------------------------

出现这个问题的原因是：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。

解决办法：用innerHTML嵌入以后，通过DOM从myDIV中取出嵌入的script节点，然后新创建一个script节点，并把嵌入的script里面的内容也赋给新创建的script节点，然后把这个新节点追加到页面的head节点中，这样就可以调用里面的getName方法了。

这里有两种方式：

第一种方式：只修改a.jsp，增加红色部分

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);

var newScript = document.createElement("SCRIPT");

newScript.innerHTML = myDivScript.innerHTML;

document.getElementsByTagName("HEAD").item(0).appendChild(newScript);

这种方式在FF中可以work，但是IE中不能work。

第二种方式：把b.jsp中的js抽取出来放在一个js文件里。在a.jsp中通过src引用的方式把js加到HEAD里面。

在a.jsp的<script> 部分增加一个函数 function append()

--------------------a.jsp-------------------------------------------------------

<%@ page language="java" contentType="text/html" %>

String tt = "Title";

String path = "../js/script.js";

<%=tt %>

<button id="getContent" name="getContent" οnclick="getContent();">Get Content</button>

<p></p>

</div>

<p></p>

End

xmlhttp = new XMLHttpRequest();

function getContent() {

append();

xmlhttp.open("POST","./b.jsp",true);

xmlhttp.send();

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

function append() {

var head = document.getElementsByTagName('HEAD').item(0);

var script = document.createElement("script");

script.src = "<%=path %>";

script.type="text/javascript";

script.charset="utf-8";

head.appendChild(script);

}

</script>

------------------------------------b.jsp--------------------------------------------------------

<%@ page language="java" contentType="text/html" %>

String aa = "To include jsp";

<%=aa %> <br />

--------------------------------------------script.js-----------------------------------------------------------------

function getName() {

document.getElementById("myname").value = 'Bill';

}

-------------------------------------------------End-------------------------------------------------------------------

这种方式在FF和IE中都能work。

金生水起sky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax调用后JS不生效的问题及解决办法

a.jsp通过Ajax调用b.jsp，然后返回b.jsp的内容显示在a.jsp中。现在遇到一个问题，就是在b.jsp中定义了js，在a.jsp中click button并没有调用该js。在firefox中通过Firebug查看源代码。把它保存成html或jsp，js都可以被调用。源代码如下：-----a.jsp----------------------- &lt;%@ page language...
复制链接

扫一扫