Question

AJAX如何让服务器返回信息的输出两种不同的样式？（有能力的给代码，不要建议）

A.html是信息表单，B.php处理提交信息（有两种输出结果：YES或NO）我想要输出绿色的YES或红色的NO
如果在B.php文件里单独加输出样式（如：echo "<p style='color:green'>YES</p>"），是可以达到最终在B.php页面输出 绿色的YES。但现在运用了AJAX，B.php文件的输出结果在A.html页输出，以上方法便行不通，那样会把<p style=...>这些标签信息也输出在A.html页面了，我在A.html修改了输出样式，但只有一种色。

请问如何修改A.html来判断由服务器B.php返回的信息，让其两种结果输出两种不同的颜色呢。

字数限制原因。给出部份代码如下：（请有能力的帮忙修改加个判断，谢谢）

<script type="text/javascript">
window.onerror=function(errorMessage,errorUrl,errorNum)
{
alert(errorMessage+errorUrl+errorNum);
}
var xmlHttp;
function createXmlHttp()
{
//if(window.ActiveXObject)
//xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
// else
// xmlHttp=new XMLHttpRequest();
if (window.ActiveXObject) { // IE浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
} else {
xmlHttp=new XMLHttpRequest();
xmlHttp.overrideMimeType("text/xml");
}
if (!xmlHttp) {
window.alert("can not create XMLHttpRequest object.");
return false;
}

}
function startRequest()
{
try
{
createXmlHttp();
var url="B.php";
var postedData=getRequestBody(document.forms["form1"]);

xmlHttp.open("post",url,true);
xmlHttp.setRequestHeader("content-length",postedData.length);
xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");//post提交设置项
xmlHttp.onreadystatechange =onComplete;
xmlHttp.send(postedData);
}
catch(e)
{
alert(e.message);
}
}
function onComplete()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
//显示结果
// document.getElementById("divResult").innerText=xmlHttp.responseText;

if (window.ActiveXObject)
document.getElementById("divResult").innerText=xmlHttp.responseText;
else
document.getElementById("divResult").textContent=xmlHttp.responseText;
}
}
function getRequestBody(oForm)
{
var aParams=new Array();
for(var i=0;i<oForm.elements.length;i++)
{
var sParam=encodeURIComponent(oForm.elements[i].id)
sParam+="=";
sParam+=encodeURIComponent(oForm.elements[i].value);
aParams.push(sParam);
}
return aParams.join("&");
}
</script>

Answer 1

B.PHP只输出YES或NO两种字符，然后在a.html中将document.getElementById("divResult").textContent=xmlHttp.responseText;
这句改成：
if (xmlHttp.responseText == "YES") {
document.getElementById("divResult").style.color = "green";
}
else {
document.getElementById("divResult").style.color = "red";
}

注意替换的时候，外层加大括号

追问

{if (xmlHttp.responseText == "YES") {
document.getElementById("divResult").style.color = "green";
}
else {
document.getElementById("divResult").style.color = "red";
}
}

那句替换成这样后，输出是黑色。没有绿色也没有红色，看来是没有起作用？我还想问：如果返回字符不是YES这三个字母，而是一句话（有空格）的话，是否还可以如你这般修改？

追答

黑色？如果这段代码被执行，要不是绿色要不就是是红色，是黑色只能说明这段代码没执行。调试一下，看一下onComplete()这个回调函数是否被执行。

追问

是的，正是没有被执行（也就是没有添加上样式），我不是网页编程人员。我不知道如何调试。

我的意思是：在没有将那一段代码修改前（按照我原来的是可以执行的），但修改后加了判断的代码似乎便不执行了，何解？

追答

帮你测试了一下，这段代码没有什么问题，问题可能出现在你的B.PHP。你可以试着onComplete() 加上alert(xmlHttp.status);如果提示为500证明服务端出错。

function onComplete() {
alert(xmlHttp.status);
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)...

追问

我加了这一句，测试结果如下：
1.在a.html表单按提交；
2.弹出错误如下：（内容为复制，实际为IE弹窗）
Unspecified error

http://www.test.com./a.html156

按三次确定（OK），看第3点。

3.弹以下错误：

200

追答

再在这个位置换成：
alert(xmlHttp.readyState == 4 && xmlHttp.status == 200);
如果提示为true就应该可以执行下面if中的代码。

追问

将alert(xmlHttp.status);更换为alert(xmlHttp.readyState == 4 && xmlHttp.status == 200);
后，测试结果如下：
1.提交；
2.弹窗显示false；
3.连续三次点击OK；
4.弹窗显示true；
5.点击OK；
6.显示由服务器b.php返回的信息（仍然是黑色）。

追答

服务器返回正常呢，你把HTML中 id="divResult"的这段内容贴出来看一下

追问

A.html文件源码里所有含divResult的相关代码如下：(这段代码我放在与之间）

追答

有两个divResult？而且中间不是空的吗，这段代码是改变中的内容颜色。写成aaabbbccc试一下。

追问

这个我明白。但如果在DIV之间加了内容的话，表单在没提交状态时会显示这之间的内容。提交后再返回信息将之间的信息代替。我不希望表单还没提交时就显示aaabbbccc啊，所以留白了。

况且我现在就算加上了，仍然显示的是 黑色的aaabbbccc

追答

测试一下呀，检查一下是否正常。

追问

测试了啊，仍然黑色

追答

这样吧，我的机子上装有百度hi,我们通过hi交流吧，这边太长了。

function onComplete()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
//显示结果
// document.getElementById("divResult").innerText=xmlHttp.responseText;

if (window.ActiveXObject){
document.getElementById("divResult").innerText=xmlHttp.responseText;
if (xmlHttp.responseText == "The security code entered was incorrect.")
{
document.getElementById("divResult").style.color = "red";
}
else
{
document.getElementById("divResult").style.color = "green";
}
}
else
{
//你原来贴在这里
}
}
}

Answer 2

你可以用下google 的开源框架 gosn 结合 jquery ，搞定一切 ajax

Answer 3

对不起，我JS实在是有点儿不太好
不过我可以告诉你大概的方法
if (那个返回值 = error ){
var sss = 加上样式以后的那个变量
document.getElementById("divResult").innerText=sss;
}else{
方法跟上面一样
}
给你一个以前写的JS判断的吧，希望能够帮到你

if(sss=="error"){
document.getElementById("divResult").innerText=fontcolor("red").fontsize(6)+" "+"ERROR".fontcolor("red");
}

----------------------------------------------------------------------------------------------------------------

if (xmlHttp.responseText == "YES") {
document.getElementById("divResult").style.color =fontcolor("red").fontsize(6)+" "+"ERROR".fontcolor("red");
}
else {
document.getElementById("divResult").style.color =fontcolor("green").fontsize(6)+" "+"OK".fontcolor("green");
}

试试这个。。。

你可以试着在另一个页面返回0和1
在这个页面判断

追问

和楼上那位网友的一样，似乎这段判断代码并没有被执行。