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" onclick="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" onclick="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 onclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv">
To include jsp <br>
<input name="myname" id="myname">
<button onclick="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" onclick="getContent();">Get Content</button>
<p></p>
<div id="myDiv">
</div>
<p></p>
End
<script type="text/javascript">
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 />
<input id="myname" name="myname" />
<button id="getName" name="getName" onclick="getName();">Get Name</button>
--------------------------------------------script.js-----------------------------------------------------------------
function getName() {
document.getElementById("myname").value = 'Bill';
}
-------------------------------------------------End-------------------------------------------------------------------
这种方式在FF和IE中都能work。
分享到：
相关推荐
解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题 在实际应用中，我们经常会遇到使用 Ajax 返回某一个网页的内容到模板页面的某一个 `<div>` 标签中显示的操作。如果返回的值仅仅是文本类数据，不会影响模板...
在作者的代码中，获取行业列表和基本信息是两个独立的接口调用，由于AJAX请求的异步性，可能出现基本信息先返回，而行业列表数据后返回的情况，导致v-model绑定的值在select中无法找到匹配的选项，从而无法默认选中...
Ajax乱码问题主要涉及到字符编码的处理，包括服务器端、客户端以及文件的编码设置。解决Ajax乱码问题的关键在于确保整个数据传输链路上的编码一致性。...通过这些方法，可以有效避免和解决Ajax相关的乱码问题。
- **事件绑定：** 如果问题出在事件监听器未生效，可以考虑使用事件委托，或者在Pjax 更新内容后重新绑定事件。 - **数据初始化：** 对于依赖页面加载时初始化的数据，可以在Pjax更新内容后，调用相应的初始化函数。...
2. **UpdatePanel**：允许在不刷新整个页面的情况下更新一部分内容，通过异步调用服务器端方法来更新数据。 3. **AjaxControlToolkit**：微软提供的一个开源项目，包含了一系列预包装的AJAX控件，如...
为了解决这个问题，可以使用`addJavascriptInterface`方法暴露一个Java对象给JavaScript，通过这个对象来间接发起网络请求： ```java webView.addJavascriptInterface(new Object() { @JavascriptInterface @...
它通过Ajax调用处理过程GETENAME，并将返回的员工姓名设置到P1_ENAME文本框中： ```javascript function get_ename() { var emp_id = document.getElementById('P1_EMPID').value; var get = new htmldb_Get(null...
除了这些控件，ASP.NET AJAX还提供了一些其他服务，如脚本服务（ScriptServices），允许你将Web服务公开给客户端JavaScript调用，实现服务器端逻辑与客户端交互。 在实际开发中，使用Ajax技术可以极大地提升网站的...
ScriptManager还可以管理页面上的其他Ajax控件和服务端方法调用。 3. Timer控件：在Asp.Net AJAX中，Timer控件可以定期触发事件，如每隔一定时间自动检查服务器更新，无需用户操作。这在实时数据更新或计时任务中...
安装完成后，通常会有提示，建议重启电脑以使更改生效。 **二、Ajax 1.0 控件的使用** Ajax 1.0 包含了一系列服务器端和客户端控件，这些控件极大地增强了Web应用的用户体验，如： 1. **UpdatePanel**: 这是最...
描述中提到的解决方案是通过修改 JS 文件，不改变 ECShop 的源代码，而是采用 jQuery 的方法来实现 AJAX 功能。 首先，要解决冲突，我们需要理解 Prototype 和 jQuery 的冲突是如何发生的。通常，jQuery 提供了一个...
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是不可或缺的一部分，它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换。本文将详细介绍如何利用AJAX提交表单的完整流程，以实现更加流畅...
接口调用通常通过JavaScript或AJAX实现，使得前端能够动态获取和提交数据，与服务器进行交互。 2. **API接口**：应用程序编程接口（API）是不同软件系统之间进行通信的约定，它定义了一组规则和协议，让开发者可以...
AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。它主要涉及以下核心组件： 1. XMLHttpRequest对象：用来在后台与...
### ASP.NET配合jQuery解决跨域调用的问题 #### 跨域问题概述 在现代Web开发中，跨域问题是一个常见的安全限制机制。浏览器为了保护用户的隐私数据，实施了同源策略（Same-origin policy）。该政策规定，来自不...
**Ajax**是异步JavaScript和XML的缩写，虽然现在通常使用JSON而非XML，Ajax使得前端可以与服务器进行异步通信，无需刷新整个页面。在这个项目中，用户输入登录信息后，前端通过Ajax发送登录请求，获取服务器的验证...
总结，这个"SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例"旨在帮助开发者理解并实践CORS在SpringBoot后端和Ajax前端中的应用，解决跨域问题，提升Web应用的开发效率和用户体验。通过学习和运行这个样例...
- 如果上述方法仍不能解决问题，则可以考虑对所有JavaScript函数进行封装处理，建立一个统一的调用接口来替代直接使用`$`或`jQuery`的方式。比如定义一个全局对象`Util`，然后将所有相关的函数挂载到该对象上，例如...
当调用此函数后，之前设置的拦截逻辑将不再生效。这对于在特定条件下需要停止拦截的场景非常有用。 ### 注意事项 - Ajax-hook可能会影响到页面中已经使用到的其他库或框架。在引入和使用之前，需要确保它与页面中...
约会后会有一个称为“ ah”（ajax hook）的一部分对象，通过它可以调用ajax-hook的API，如ah.proxy(hooks) NPM♡ npm install ajax-hook拦截XMLHttpRequest通过proxy(hooks)拦截： import { proxy , unProxy } from ...