html提示未定义ajax,在ajax显示块里再次应用ajax,js报方法未定义

本文探讨了一个在A页面通过AJAX加载B页面,B页面试图进一步使用AJAX加载C页面时遇到的问题。B页面的onclick事件在A页面中触发时报错,而在单独访问B页面时却正常工作。寻求解决在A页面中正确调用B页面AJAX的方法,以及避免AJAX块嵌套的技术挑战。
摘要由CSDN通过智能技术生成

比如说A页面使用了ajax,在div中显示了B页面。

然后B页面中的一个块也用到了ajax要显示C页面的内容。

A页面可以显示B页面的内容,但是B页面的onclick()报错了,无法显示C页面。

如果直接访问B页面,也就是只用一次ajax时,B页面中的div是可以显示C页面。

SearchFriend.jsp

contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

User u = new User();

OperateDB oDB = new OperateDB();

u = oDB.getUserByUsername((String) (session

.getAttribute("username")));

ArrayList userFriends = oDB.getAllFriendsOf(u);

%>

href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

寻找好友

* {

margin: 0px;

padding: 0px;

}

.my-container {

width: 970px;

margin: 80px auto 0px auto;

}

.nav-list {

width: 370px;

height: 40px;

}

.forCenter {

background: #F3F3F3;

width: 650px;

margin: 50px auto 0px auto;

border: 1px solid #CCC;

border-radius: 4px;

padding-top: 10px;

}

.nav-list a {

display: block;

width: 120px;

text-align: center text-decoration: none;

}

.nav-list li a:hover {

background: #108AC6;

color: #FFFFFF;

text-decoration: none;

line-height: 29px;

}

.nav-list ul, .nav-list li {

list-style: none;

text-align: center;

line-height: 30px;

background: #FAFAFA;

float: left;

}

.my-input {

float: left;

width: 400px;

margin-left: 100px;

}

function showResult() {

var xmlHttp = false;

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

window.alert("该浏览器不支持Ajax");

}

}

}

var username = document.getElementById("input-username").value;

if (username != null && username != "") {

username = encodeURI(username);

xmlHttp.open("POST", "ShowSearchResult.jsp?username=" + username,

true);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

showSearchResult.innerHTML = xmlHttp.responseText;

}

}

xmlHttp.send();

}

}

id="input-username" placeholder="用户名">

οnclick="showResult();">搜索

ShowSearchResult.jsp

contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

User u = new User();

OperateDB oDB = new OperateDB();

u = oDB.getUserByUsername((String) (session

.getAttribute("username")));

User user = new User();

String username = request.getParameter("username");

if (username != null) {

user = oDB.getUserByUsername(username);

}

%>

href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

我的好友

.comment-input {

border: 1px solid;

min-width: 600px;

max-width: 600px;

min-height: 30px;

}

.comment-state {

border: 1px solid;

width: 80px;

height: 40px;

}

function showTextarea(uID, userID) {

var textdiv = document.getElementById("text-input");

if (textdiv.style.display == "" || textdiv.style.display == "none") {

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

textarea.className = "comment-input";

textarea.id = "text";

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

input.clssName = "comment-state";

input.id = "btn";

input.type = "button";

input.value = "发表";

input.onclick = function() {

sendAddFriend(uID, userID);

}

textdiv.appendChild(textarea);

textdiv.appendChild(input);

textdiv.style.display = "block";

} else {

textdiv.removeChild(document.getElementById("text"));

textdiv.removeChild(document.getElementById("btn"));

textdiv.style.display = "none";

}

}

function sendAddFriend(uID, userID) {

var xmlHttp = false;

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

window.alert("该浏览器不支持Ajax");

}

}

}

var text = document.getElementById("text").value;

if (text != null && text != "") {

text = encodeURI(text);

xmlHttp.open("POST", "SendMessage.jsp?uID=" + uID + "&userID="

+ userID + "&text=" + text, true);

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

sendMessageInfo.innerHTML = xmlHttp.responseText;

}

}

xmlHttp.send();

} else {

alert("请输入评论内容");

document.getElementById("text").focus;

}

document.getElementById("text").value = "";

}

if (user != null) {

out.print(user.getPicture() + "
");

out.print(user.getUserID() + "
");

out.print(user.getUsername() + "
");

out.print(user.getAge() + "
");

out.print(user.getSex() + "
");

out.print(user.getAddress() + "
");

out.print("");

out.print("

out.print("

} else {

out.print(username + " 不存在");

}

%>

SendMessage.jsp

contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

User u = new User();

User user1=new User();

User user2=new User();

OperateDB oDB = new OperateDB();

u = oDB.getUserByUsername((String) (session

.getAttribute("username")));

String uid = request.getParameter("uID");

String userid = request.getParameter("userID");

String text = request.getParameter("text");

if (uid != null&&uid!="") {

int userid1 = Integer.parseInt(uid);

user1=oDB.getUserByUserID(userid1);

}

if (userid != null&&userid!="") {

int userid2 = Integer.parseInt(userid);

user2=oDB.getUserByUserID(userid2);

}

oDB.sendAddFriendMessage(user1, user2, text);

%>

发送消息

请求已发送

点击没反应,调试报错

bVmrRh

在IE调试下报了方法未定义的错误。我觉得可能是不能在A页面找到B页面的js方法。

bVmrdY

直接访问B页面,点击加好友可以弹出输入框

bVmrRl

如何解决此问题,不能用ajax块嵌套一个ajax块(暂且我就这样描述吧)吗?

页面是jsp写的,css,js和html都没分开写。用了JavaBean和dao封装了些东西。

感觉@浅黑色 的回答可能是答案涉及的。可是本人对js了解不多,边学边做。期待有原生js的回答。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值