Fatal编程技术网
  • javascript/
  • Javascript 使用ajax在div中创建动态dojo文本字段？

Javascript 使用ajax在div中创建动态dojo文本字段？

javascript ajax jsp dojo

Javascript 使用ajax在div中创建动态dojo文本字段？,javascript,ajax,jsp,dojo,Javascript,Ajax,Jsp,Dojo,当我使用welcome.jsp运行时，dojo会动态创建一个文本框。但是当我在index.jsp中使用ajax调用welcome.jsp时，它只显示div元素，而不在该div中创建文本字段。。。。。。。。。。。谁能帮帮我？ 这是密码 index.jsp <!DOCTYPE html> <%@page import="java.util.*" %> <%@page import="org.hibernate

当我使用welcome.jsp运行时，dojo会动态创建一个文本框。但是当我在index.jsp中使用ajax调用welcome.jsp时，它只显示div元素，而不在该div中创建文本字段。。。。。。。。。。。谁能帮帮我？ 这是密码

                            index.jsp



<!DOCTYPE html>
<%@page import="java.util.*" %> <%@page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"  data-dojo-config="parseOnLoad: true, isDebug: true"></script>

    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dojo/resources/dojo.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/tundra/tundra.css">
<script>
require(["dojox/layout/ContentPane"]);
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  alert("str is"+str);
xmlhttp.open("GET","welcome.jsp",true);
xmlhttp.send();
alert(4);
}
</script>
</head>
<body class="tundra">

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>


<option value="customer1">customer1</option>    

</select>
</form>
<br>
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: '/welcome.jsp', executeScripts: true">
    Customer info will be listed here...
</div>

</body>
</html>

                    welcome.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@page import="java.util.*" %> <%@page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
    <title>Dojo DnD test</title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js"  data-dojo-config="parseOnLoad: true, isDebug: true"></script>

    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/document.css">
    <link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/dijitTests.css">
    <body onload="vali();">
    </body>
<script>
dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
require(["dojox/layout/ContentPane"]);
var widgets = new Array();
var source;
var c=new Array();


dojo.ready(function() {




 for (var i = 0; i < 5; i++) {
     widgets.push(
     new dijit.form.TextBox({
         value: i,
         class: 'dojoDndItem',
     }).placeAt("source"));
 }

 source = new dojo.dnd.Source("source", {
     copyOnly: false
 });
 new dojo.dnd.Source("target");
});
setValue = function() {
    widgets[0].attr("value", (new Date).getTime());
};

insertNew = function() {
 widgets.push(
    new dijit.form.TextBox({
        value: widgets.length,
        class: 'dojoDndItem',
    }));

    source.insertNodes(true, [widgets[widgets.length-1].domNode]);
};
</script>

</head>
<body class="claro">
<form name="form1">
    <div dojoType="dijit.form.Button" onClick="setValue">
    set value textbox 0
</div>
<div dojoType="dijit.form.Button" onClick="insertNew">
    insert new textbox
</div>
<table>
<tr>
<td>
<div id="source" style="height: 200px; width: 200px; border: 1px solid red;">

</div>  </td>
<td><div id="target" style="height: 200px; width: 200px; border: 1px solid blue;">

</div></td></tr></table>

</form>
</body>
</html>

index.jsp
需要（[“dojox/layout/ContentPane”]）；
功能显示客户（str）
{
var-xmlhttp；
如果（str==“”）
{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
警报（“str为”+str）；
open（“GET”，“welcome.jsp”，true）；
xmlhttp.send（）；
警惕（4）；
}
选择一个客户：
顾客1


客户信息将列在这里。。。
welcome.jsp
Dojo DnD试验
require（“dojo.dnd.Source”）；
require（“dijit.form.TextBox”）；
require（“dijit.form.Button”）；
需要（[“dojox/layout/ContentPane”]）；
var widgets=newarray（）；
var源；
var c=新数组（）；
ready（function（））{
对于（变量i=0；i<5；i++）{
widgets.push(
新dijit.form.TextBox({
价值观：我，
类：“dojoDndItem”，
}).placeAt（“来源”）；
}
source=new dojo.dnd.source（“source”{
copyOnly:错误
});
新dojo.dnd.Source（“target”）；
});
setValue=函数（）{
widgets[0].attr（“值”，（新日期）.getTime（））；
};
insertNew=函数（）{
widgets.push(
新dijit.form.TextBox({
值：widgets.length，
类：“dojoDndItem”，
}));
insertNodes（true，[widgets[widgets.length-1].domNode]）；
};
设置值文本框0
插入新文本框
这是因为当您使用AJAX加载内容时，脚本不会被解释。您必须自己使用
eval（）
函数对其进行评估。或者，因为您使用的是Dojo，所以可以查看模块。此模块允许您加载页面（通过AJAX请求）并执行页面上的脚本，而无需整个
XMLHttpRequest
或
ActiveXObject
开销（也无需手动调用
eval（）
）

要使用
dojox/layout/ContentPane
，只需将
替换为ID
#txtHint
：


客户信息将列在这里。。。
您只需确保加载Dojo，设置
数据Dojo config
属性，以便设置
parseOnLoad:true
属性，并且需要确保通过以下代码导入
dojox/layout/ContentPane
模块：

require（[“dojox/layout/ContentPane”，“dojo/parser”]）；
可以在上找到加载网页的完整示例（我将
href
更改为
/
，这样它会再次加载主页，因为我没有
欢迎.jsp
页面）

另一个以编程方式执行相同操作的示例可以在这里找到。

您能告诉我如何将dojox/layout/ContentPane模块添加到我的代码中吗？我使用
dojox/layout/ContentPane
模块更新了我的答案。我还注意到你之前的评论，回答说：
eval（）
不容易。您必须解析响应字符串并获取
标记之间的所有代码，并在该部分使用
eval（）
。正如您所说，我已将代码添加到我的程序中，但它不起作用。我已编辑了代码并删除了scriptlet代码，我只通过ajax调用index.jsp中的welcome.jsp。当我运行welcome.jsp时，它工作正常，当我通过ajax调用时，它不会创建文本框。你能告诉我“不工作”是什么意思吗？是否显示错误，而不是在页面上执行JavaScript。