Ajax实现html页面数据无刷新更新数据 在线急等，立马给分

xinQQ715 2011-08-29 01:51:52
Ajax实现html页面数据无刷新更新数据 ，改html里面的内容，页面无刷新就更新出来，各位牛人谁能给我个代码，我不是很懂ajax ，
...全文
859 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
Left_you 2011-12-08
  • 打赏
  • 举报
 回复
页面：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ajax.html</title>

    

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html;charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript">

        

        /**var Ajax = function(){

            Ajax.prototype.createAjaxObject = function(){

                  return new XMLHttpRequest();

            }

        }*/

         //1. 创建AJAX对象

         function createAjaxObject(){

             if(window.XMLHttpRequest){

                 return new XMLHttpRequest();

             }else {

                 //IE5.0 IE5.5 IE6.0

                 return new ActiveXObject('Microsoft.XMLHTTP');

             }

         }



        function isExist(obj){

             if(!obj.value){

                alert('请输入用户名');

                obj.focus();

                return;

             }

             

             //1. 创建ajax对象

             var xmlhttp = createAjaxObject();

             url = 'ajax.let?method=checkUsername';

             //2. 设置ajax请求的参数 [a.请求方法，b.请求url， c.请求类型(同步 false | 异步 true)] open();

             xmlhttp.open('post',url,true);

             

             //3.注册事件回调函数 (监听ajax对象状态改变时被调用)

             xmlhttp.onreadystatechange = function(){

                 //alert("test = " + xmlhttp.readyState);

                 if(4 == xmlhttp.readyState){ //服务器端完全响应客户端

                     //获取服务器端响应客户端的信息

                     if(200 == xmlhttp.status)

                         alert(xmlhttp.responseText);

                         

                     if(404 == xmlhttp.status)

                         alert('当前资源不存在！');

                     

                     if(500 == xmlhttp.status)

                         alert('系统正忙。。。。');

                 }

             }

             //设置请求参数格式  key=value;

             xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

             //4.发送ajax请求 send(发送请求数据)

             xmlhttp.send('username=' + obj.value);

        }

        

        function getAreas(obj){

            selectArea = document.getElementById('area');

            selectArea.innerHTML = ''; //清空

            if(!obj.value){

                alert('请选择城市！');

                selectArea.disabled = true;

                return;

            }

            

             

             //1. 创建ajax对象

             var xmlhttp = createAjaxObject();

             url = 'ajax.let?method=getAreaByCity&city=' + obj.value + "¶m=" + Math.random();

             //2. 设置ajax请求的参数 [a.请求方法，b.请求url， c.请求类型(同步 false | 异步 true)] open();

             xmlhttp.open('get',url,true);

             

             //3.注册事件回调函数 (监听ajax对象状态改变时被调用)

             xmlhttp.onreadystatechange = function(){

                 if(4 == xmlhttp.readyState){ //服务器端完全响应客户端

                     //获取服务器端响应客户端的信息

                     if(200 == xmlhttp.status){

                         //获取所有的area元素对象

                         selectArea.disabled = false;

                         

                         /*var areas = xmlhttp.responseXML.getElementsByTagName('area');

                         for(i = 0; i < areas.length; i++){

                             //alert(areas[i].getAttribute('code') + '\t' + areas[i].text);

                             option = document.createElement('option');

                             option.setAttribute('value', areas[i].getAttribute('code'));

                             option.innerHTML = areas[i].text;

                             selectArea.appendChild(option);

                         }*/

                         var msg = xmlhttp.responseText;

                         

                         var areas = eval(msg);

                         for(i = 0; i < areas.length; i++){

                             option = document.createElement('option');

                             option.setAttribute('value', areas[i].code);

                             option.innerHTML = areas[i].name;

                             selectArea.appendChild(option);

                         }

                     }

                 }

             }

             //4.发送ajax请求 send(发送请求数据)

             xmlhttp.send(null);

        }

    </script>

  </head>

  

  <body>

        用户名:<INPUT TYPE="text" NAME="username" onblur="isExist(this)"/>

        

         <a href="ajax.let?method=checkUsername&username=八神山" 

             onclick="alert(encodeURI('八神山'))">测试</a>

        <br/><br/><br/>

        <hr>

        

        城市:<select name="city" onchange="getAreas(this)">

                <option value="">请选择</option>

                <option value="0">长沙</option>

                <option value="1">株洲</option>

                <option value="2">常德</option>

        </select>

        

       地区:<select id="area" disabled></select> 

  </body>

</html>


处理：
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.class70.mvc.action.ActionForm;
import com.class70.mvc.action.ActionForward;
import com.class70.mvc.action.DispatcherAction;

public class AjaxAction extends DispatcherAction {

private static Map<String, List<?>> areasMap = null;

/**
* 地区初始化数据
* @param key
* @return
*/
static {
areasMap = new HashMap<String, List<?>>();

List<AreaVO> list = new ArrayList<AreaVO>();
list.add(new AreaVO("001","雨花区"));
list.add(new AreaVO("002","天心区"));
list.add(new AreaVO("003","岳麓区"));
list.add(new AreaVO("004","开福区"));
list.add(new AreaVO("005","芙蓉区"));
areasMap.put("0", list);

list = new ArrayList<AreaVO>();
list.add(new AreaVO("006","芦淞区"));
list.add(new AreaVO("007","开发区"));
areasMap.put("1", list);

list = new ArrayList<AreaVO>();
list.add(new AreaVO("008","武陵区"));
list.add(new AreaVO("009","鼎城区"));
areasMap.put("2", list);
}

/**
* 检测用户名是否存在
* @param form
* @param method
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward checkUsername(ActionForm form, String method,
HttpServletRequest request, HttpServletResponse response)throws Exception{
String username = request.getParameter("username");

System.out.println(new String(username.getBytes("iso8859-1"),"UTF-8")
+ " method = " + request.getMethod());

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if("qq".equals(username)){
out.println("当前用户名已经被使用！");
}else {
out.println("可以使用！");
}
out.close();
return null;
}


/**
* 根据city编号，获取对应地区信息
* @param form
* @param method
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward getAreaByCity(ActionForm form, String method,
HttpServletRequest request, HttpServletResponse response)throws Exception{
String city = request.getParameter("city");

List<?> list = areasMap.get(city);
StringBuilder xml = new StringBuilder();
// xml.append("<city-areas>");
// for (int i = 0; i < list.size(); i++) {
// AreaVO vo = (AreaVO)list.get(i);
// xml.append("<area code='" + vo.getCode() + "'>" + vo.getName() + "</area>");
// }
// xml.append("</city-areas>");
// response.setContentType("text/xml;charset=UTF-8");

xml.append("[");
for (int i = 0; i < list.size(); i++) {
AreaVO vo = (AreaVO)list.get(i);
if(i > 0){
xml.append(",");
}
xml.append("{code:'" + vo.getCode() + "',name:'" + vo.getName() + "'}");
}
xml.append("]");
System.out.println("js : " + xml.toString());
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(xml.toString());
out.close();
return null;
}
}
jasperu 2011-12-08
  • 打赏
  • 举报
 回复
如果你想 实现的是HTML页面的话，那么就需要使用 JS 库了，好比，JQuery的ajax功能，
可以后台访问数据库，然后将读取处理的数据以XML 或是JSON的格式，会发回来，然后 $.post的回调方法中解析出来，然后就基本可以了
jasperu 2011-12-08
  • 打赏
  • 举报
 回复
咳，，有图有真相啊，
你可以使用VS2008 里面有，一个ajax extensions ，里面有一个
scriptManager,等，
一般使用的话，就是 如图，
将要会发或是需要后台处理的数据放入到 !aaaaaaaaaaaaaa_! 中。
<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

!aaaaaaaaaaaaaa_!
</ContentTemplate>



</asp:UpdatePanel>


<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
正在加载中.............
</ProgressTemplate>
</asp:UpdateProgress>
wuzhiwenk3001 2011-08-30
  • 打赏
  • 举报
 回复
感觉上学AJAX最好先学JQUERY，比较容易
昵称不能为空噢噢噢噢 2011-08-30
  • 打赏
  • 举报
 回复
哦 ，php不会，
昵称不能为空噢噢噢噢 2011-08-30
  • 打赏
  • 举报
 回复
/**
* 确认删除科室信息
*/
function deleted(ksid) {
jConfirm(
'<s:text name="wxhd.common.submit.delete"></s:text>',
"<s:text name='wxhd.common.ts'></s:text>",
function(result) {
if (result) {
var requestUrl = "${rootpath}/admin/jcxx/kshi!delete.action?kSId="
+ encodeURIComponent(ksid) ;
$.ajax({
url : requestUrl,
type : 'POST',
timeout : timeOut,
success : function(data) {
if(data == 'false'){
jAlert(
"科室下有人员信息，不能删除！",
"提示");
}else{
jAlert(
"科室信息删除成功！",
"提示");
}
var url = "kshi!getListData.action";
/*当前页数*/
var pageTmp = $("#ksList").jqGrid("getGridParam", "page");
/*每页显示的记录总数*/
var rowsTmp = $("#ksList").jqGrid("getGridParam","rowNum");
/*需要修改的参数 以Json串存放*/
var jsonObj = {
url : url
};
/*设置参数*/
$("#ksList").jqGrid("setGridParam", jsonObj);
/*按上面的参数 刷新Datagrid*/
$("#ksList").trigger("reloadGrid");
},
error : function(json) {
jAlert(
"返回列表界面失败",
"提示");
}
});
}
});
}
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<?php

$xml = simplexml_load_file('index.xml');
$part = $xml->site->part;
foreach ( $part as $content )
{
echo $content['id']."<br />";
echo $content->title."<br />";
echo $content->title['id']."<br />";
echo $content->describe."<br />";
}
?>
</body>
</html>

比如说读取index.xml 文件，我怎样写ajax，只要我在后面改index.xml文件就在页面无刷新更新出来了
就是这个问题，其它的不说，解决这个就行
yuang3919 2011-08-29
  • 打赏
  • 举报
 回复
楼上给力
demonapple 2011-08-29
  • 打赏
  • 举报
 回复
ajax不就是为了解决局部刷新的问题么 你现在要整个页面刷新 不需要用ajax了
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
这个是index.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<xml>
<site>
<part id="1">
<title id="a">czbin xml版块00dddddddddd</title>
<describe>xml的相关文章</describe>
</part>
<part id="2">
<title id="b">czbin php版块</title>
<describe>php的相关文章</describe>
</part>
<part id="3">
<title id="c">czbin ajax版块</title>
<describe>ajax的相关文章</describe>
</part>
</site>
</xml>
weiying154979554 2011-08-29
  • 打赏
  • 举报
 回复
你是用PHP写的啊？抱歉了。。。
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<?php

$xml = simplexml_load_file('index.xml');
$part = $xml->site->part;
foreach ( $part as $content )
{
echo $content['id']."<br />";
echo $content->title."<br />";
echo $content->title['id']."<br />";
echo $content->describe."<br />";
}
?>
</body>
</html>

比如说读取index.xml 文件，我怎样写ajax，只要我在后面改index.xml文件就在页面无刷新更新出来了，
weiying154979554 2011-08-29
  • 打赏
  • 举报
 回复
能否把页面代码贴出来看看
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
整个页面刷新
weiying154979554 2011-08-29
  • 打赏
  • 举报
 回复
是局部刷新还是全页面
hnfeitianwugui 2011-08-29
  • 打赏
  • 举报
 回复
帮顶·····另外不用jquery不会··等高手
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
怎么么有人来解决呢
xinQQ715 2011-08-29
  • 打赏
  • 举报
 回复
补充一句，不能用jquery
ajax异步问题导致的刷新页面数据不更新
ajax的async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待...ajax用它就是因为它的异步性，平时也都是默认值，今天在项目中遇到这样一个问题，用ajax更新数据后，立马刷新页面：$.ajax({
ajax刷新页面怎么中止,Ajax页面的前进后退与刷新如何实现
这次给大家带来Ajax页面的前进后退与刷新如何实现，实现Ajax页面的前进后退与刷新注意事项有哪些，下面就是实战案例，一起来看一下。使用Ajax可以异步获取数据，可以更高效地渲染页面。但也存在这一些问题：再刷新...
ajax提交成功后局部刷新 jq_jquery实现form表单提交后局部刷新页面的多种方法
比如这样的：但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。所以问题又回到了最开始...
jquery实现form表单提交后局部刷新页面的多种方法
比如这样的：但是遇到了一个小问题，就是form表单下任意输入框输入完按回车提交，整个页面都会刷新，就算我用ajax从后台取出数据返回前端把页面更新了，整个页面还是会立马刷新成原来的样子。 所以问题又回到了...
replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新...
但也存在这一些问题：再刷新页面，页面就会变成初始的状态浏览器的前进后退功能无效对搜索引擎的爬虫抓取不友好1、早前会使用浏览器的hash锚点来解决不同的hash标记着页面不同的部分，能修正页面刷新数据不正确的...
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章