ajax改了div颜色，刷新又变回去

如果不是这样肯定不行。加载页面肯定执行原来的静态
for example
<div style = "color:red"/>

用 cookies 呀，回调的时候写cookies，onload的时候读取cookies，看看有无颜色

cookies 只在客户端
别的用户看不到了呀

页面onload的时候 ajax访问后台拿到当前颜色

如果第一次调用的时候，这个静态方法里初始值为Null时就赋值为初始颜色

1.jsp<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
<select onChange="a(this.value)">
  <option value="1">紅</option>
  <option value="2">黃</option>
  <option value="3">綠</option>
  <option value="4">藍</option>
</select>
<div id="ajax"></div>
  <script>
function a(o){
var url="2.jsp?op="+o;
var xmlHttpRequest=new ActiveXObject("microsoft.xmlhttp");
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readystate==4 && xmlHttpRequest.status==200){
document.getElementById("ajax").innerHTML=xmlHttpRequest.responseText;
}
}
}
</script>
  </body>
</html>2.jsp<%
String op=request.getParameter("op");
String red="<div style='background-color:#FF0000; width:200px; height:200px '></div>";
String yellow="<div style='background-color:#CCFF00; width:200px; height:200px '></div>";
String green="<div style='background-color:#00CC00; width:200px; height:200px'></div>";
String blue="<div style='background-color:#0066FF; width:200px; height:200px '></div>";
if(op.equals("1")){
out.println(red);
}else if(op.equals("2")){
out.println(yellow);
}else if(op.equals("3")){
out.println(green);
}else if(op.equals("4")){
out.println(blue);
}
%>

如果初始顏色是灰色的話
你把1.JSP里的<div id="ajax"></div>改成<div id="ajax" style="background-color:#cccccc; width:200px; height:200px"></div>這樣默認是灰色了，你可以在下拉里選擇你要的顏色絕對不會變回灰色。如果你呀的需求是我選了紅色每次刷新還是紅色的話那用COOKIE吧在1.JSP里選擇好了顏色后后臺2.JSP里你把選擇的顏色放到COOKIES里去每次刷新頁面的時候把COOKIE讀出來用 <% out.print(...) %>放在 <div id="ajax" style="... <%out.println(); %> ... " 這里除非你手動刷新了頁面。

昨天測試了很多這個問題
我發現 COOKIE里無發保存有特殊符號的字符串如 < > # 現在完工了一共2個頁面 1.JSP 和 2.JSP<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
<select onChange="a(this.value)">
  <option value="1">紅</option>
  <option value="2">黃</option>
  <option value="3">綠</option>
  <option value="4">藍</option>
</select>
<%
String c="";
Cookie[]cookies=request.getCookies();
if(cookies!=null){
for(int i=0;i<cookies.length;i++){
if(cookies[i].getName().equalsIgnoreCase("colour")){
c=cookies[i].getValue();
out.println(c);
if("red".equals(c)){
out.println("<div style='background-color:#FF0000; width:200px; height:200px'></div>");
}else if("yellow".equals(c)){
out.println("<div style='background-color:#CCFF00; width:200px; height:200px'></div>");
}else if("green".equals(c)){
out.println("<div style='background-color:#00CC00; width:200px; height:200px'></div>");
}else if("blue".equals(c)){
out.println("<div style='background-color:#0066FF; width:200px; height:200px'></div>");
}
}
}
}else{
out.println("<div id='ajax' style='width:200px;height:200px'></div>");
}
%>
  <script>
function a(o){
var url="2.jsp?op="+o;
var xmlHttpRequest=new ActiveXObject("microsoft.xmlhttp");
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readystate==4 && xmlHttpRequest.status==200){
var c=xmlHttpRequest.responseText.replace(/(^\s*)|(\s*$)/g,"");
if(c=="red"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c="yellow"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c=="blue"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c=="green"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else{
alert("没有颜色！");
}
}
}
}
</script>
  </body>
</html>
<%
String op=request.getParameter("op");
if(op.equals("1")){
Cookie cookie=new Cookie("colour","red");
response.addCookie(cookie);
out.println("#FF0000");
}else if(op.equals("2")){
Cookie cookie=new Cookie("colour","yellow");
response.addCookie(cookie);
out.println("#CCFF00");
}else if(op.equals("3")){
Cookie cookie=new Cookie("colour","green");
response.addCookie(cookie);
out.println("#00CC00");
}else if(op.equals("4")){
Cookie cookie=new Cookie("colour","blue");
response.addCookie(cookie);
out.println("#0066FF");
}
%>
1.JSP 頁面選擇顏色不刷新變換，刷新1.JSP頁面保持最后一次選擇的顏色。PS:給分吧。。給了別人也沒關系，有啥問題請講。

修復了一個小BUG 請更新一下 1.JSP 改為
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  </head>
  <body>
<select onChange="a(this.value)">
  <option value="1">紅</option>
  <option value="2">黃</option>
  <option value="3">綠</option>
  <option value="4">藍</option>
</select>
<%
String c="";
Cookie[]cookies=request.getCookies();
if(cookies!=null){
for(int i=0;i<cookies.length;i++){
if(cookies[i].getName().equalsIgnoreCase("colour")){
c=cookies[i].getValue();
out.println(c);
if("red".equals(c)){
out.println("<div id='ajax' style='background-color:#FF0000; width:200px; height:200px'></div>");
}else if("yellow".equals(c)){
out.println("<div id='ajax' style='background-color:#CCFF00; width:200px; height:200px'></div>");
}else if("green".equals(c)){
out.println("<div id='ajax' style='background-color:#00CC00; width:200px; height:200px'></div>");
}else if("blue".equals(c)){
out.println("<div id='ajax' style='background-color:#0066FF; width:200px; height:200px'></div>");
}
}
}
}else{
out.println("<div id='ajax' style='width:200px;height:200px'></div>");
}
%>
  <script>
function a(o){
var url="2.jsp?op="+o;
var xmlHttpRequest=new ActiveXObject("microsoft.xmlhttp");
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readystate==4 && xmlHttpRequest.status==200){
var c=xmlHttpRequest.responseText.replace(/(^\s*)|(\s*$)/g,"");
if(c=="red"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c="yellow"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c=="blue"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else if(c=="green"){
document.getElementById("ajax").style.background=xmlHttpRequest.responseText;
}else{
alert("没有颜色！");
}
}
}
}
</script>
  </body>
</html>

?刷新的话会重新Load的啊 LZ可以写在onload里面比如根据Session里的error值设定~

楼主要注意AJAX的原理和他的一些缺点。一刷新的话就会重新执行你的页面，原先的AJAX调用也会失效。我教你一个我经常使用的方法。就是AJAX调用的那个页面设置一个session 而你刷新的时候要判断这个session值就可以了

不建議用SESSION SESSIO占服務器資源我用了 COOKIE

用ajax还刷新页面做什么?
ajax不是没意义了

看清楚需求選擇好顏色（假如：紅藍綠黃）即顯示顏色 (AJAX)當你最后選擇了綠色手動刷新頁面還是綠色即顏色保存的效果沒用到SESSION 沒用到數據庫用到COOKIE這點操作就要依靠服務器保存之類的都不是好辦法。

谢谢楼上各位，从你们的回复中学到了很多知识~另外，十分感谢朱超同学的热心！不过保留在客户端cookie，只在当前用户可以看到
其他的用户的界面同样没有啊我在服务器端设置了一个变量，每次加载都访问服务器

不喜歡COOKIES 可以放SESSION ，再說COOKIE里我就放了 red yellow blue green
當然這些名字你可以直接取。

调试易

ajax改了div颜色，刷新又变回去

解决方案 »