点击一个按钮如何实现div的局部刷新
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击一个按钮如何实现div的局部刷新相关的知识，希望对你有一定的参考价值。
用jquery的$.ajax进行一步获取值，然后替换div中得内容；
$('#mydiv').html('新内容')
这样就能给 id 是 mydiv 的元素替换内容了；
jQuery 代码:
$.ajax(
url: "test.html",
cache: false,
success: function(html)
$("#divId").append(html);
);
拓展资料
C#是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言。并定于在微软职业开发者论坛(PDC)上登台亮相。C#是微软公司研究员Anders Hejlsberg的最新成果。C#看起来与Java有着惊人的相似；它包括了诸如单一继承、接口、与Java几乎同样的语法和编译成中间代码再运行的过程。但是C#与Java有着明显的不同，它借鉴了Delphi的一个特点，与COM（组件对象模型）是直接集成的，而且它是微软公司 .NET windows网络框架的主角。
参考技术A 用jquery的$.ajax进行一步获取值，然后替换div中得内容；$('#mydiv').html('新内容')
这样就能给 id 是 mydiv 的元素替换内容了；
jQuery 代码:
$.ajax(
url: "test.html",
cache: false,
success: function(html)
$("#divId").append(html);
); 参考技术B 局部刷新一般都是通过ajax来实现。就是你要刷新新的数据。ajax是异步的
AJAX异步
同步：点击连接或者提交按钮页面才会跳转，整个页面都会刷新；
异步：点击按钮或者连接只会让页面局部进行刷新；
AJAX的功能：完成页面的局部刷新，不中断用户的体验。
AJAX：异步的javascript和xml（Asynchronous Javascript And XML）
Asynchronous Javascript（异步的javascript）：
JavaScript中有一个对象XMLHttpRequest可以向服务器异步发送请求；
XML：
使用XML作为数据传输的格式；（不论什么语言都可以以XML作为数据传输的一种规范，因为各个语言都支持对xml的解析）
JSON：javascript的一个对象，它的格式是key，value的键值对。（更为小巧的数据格式）
XMLHttpRequest:
属性：
readyState：XMLHttpRequest的状态：
0（未初始化）对象已经建立，但是尚未初始化（尚未调用open方法）
1（初始化）对象已经建立，尚未调用send方法
2（发送数据）send方法已经调用，但是当前的状态及http头未知
3（数据传送中）已接受部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4（完成）数据接受完毕，此时可以通过responseBody和responseText获取完整的回应数据
onreadystatechange:当XMLHttpRequest状态改变的时候触发一个函数；
status：获取响应的状态码。eg：200，404...
responseText:获得响应的文本数据
responseXML:获得响应的XML数据
方法：
open（请求方法，请求路径，是否异步）：异步去向服务器发送请求；
send（请求参数）：发送请求；
setRequestHeader(头信息，头的值)：处理POST请求方法的中文问题；
创建XMLHttpRequest对象：（不同的浏览器及不同的版本获取方式不一样，一般不自行创建，js有些框架已经封装好了直接调用即可，如Jquery）
IE：将XMLHttpRequest对象封装在一个ActiveXObject组件；
Firefox：直接就可以创建XMLHttpRequest对象；
eg：
<script type="text/javascript">
function createXMLHttpRequest(){
var xmlHttpRequest;
try{
//Firefox,Opera 8.0+,Safari
xmlHttpRequest = new XMLHttpRequest();
}catch(e){
try{
//Internet Explorer
xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
}catch(e){
try{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return xmlHttpRequest;
}
</script>
AJAX的入门
AJAX的编写步骤：
第一步：创建一个异步对象；
第二步：设置对象状态改变触发一个函数；
第三步：设置向后台提交的路径
第四步：发送请求；
异步请求的两种提交方式：GET&POST：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax</title> </head> <script type="text/javascript"> // 获得XMLHttpRequest对象 function createXMLHttpRequest() { var xmlHttpRequest; try { //Firefox,Opera 8.0+,Safari xmlHttpRequest = new XMLHttpRequest(); } catch (e) { try { //Internet Explorer xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP"); } catch (e) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttpRequest; } // ajax的GET请求 function ajax_get() { //1.创建异步对象 var xhr = createXMLHttpRequest(); //2.设置状态改变的监听、回调函数。 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //请求发送成功 if (xhr.status == 200) { //响应也成功 //获得响应数据： var data = xhr.responseText; //回写数据： document.getElementById("ajaxdiv").innerHTML = data; } } } //3.设置请求路径 xhr .open( "GET", "${pageContext.request.contextPath}/AjaxServlet?username=张三&password=123", true); //4.发送请求 xhr.send(null);//如果没有参数写null，get提交参数拼接在open()中的地址里。 } // ajax的POST请求 function ajax_post() { //1.创建异步对象 var xhr = createXMLHttpRequest(); //2.设置状态改变的监听、回调函数。 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { //请求发送成功 if (xhr.status == 200) { //响应也成功 //获得响应数据： var data = xhr.responseText; //回写数据： document.getElementById("ajaxdiv").innerHTML = data; } } } //3.设置请求路径 xhr .open("POST", "${pageContext.request.contextPath}/AjaxServlet", true); //4.设置头信息，解决post无法获得参数的问题 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") //5.发送请求 xhr.send("username=张三&password=123");//如果没有参数写null，get提交参数拼接在open()中的地址里。 } </script> <body> <div id="ajaxdiv" style="width: 300px; height: 300px; border: 1px solid red;"></div> <input type="button" onclick="ajax_get()" value="AJAX的GET请求" /> <input type="button" onclick="ajax_post()" value="AJAX的POST请求" /> </body> </html>
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = new String(request.getParameter("username").getBytes("iso-8859-1"), "utf-8"); String password = new String(request.getParameter("password").getBytes("iso-8859-1"), "utf-8"); response.setContentType("text/html;charset=utf-8"); response.getWriter().print("我是get回显的数据:username="+username+";password="+password); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); response.setContentType("text/html;charset=utf-8"); response.getWriter().print("我是post回显的数据:username="+username+";password="+password); } }
以上是关于点击一个按钮如何实现div的局部刷新的主要内容，如果未能解决你的问题，请参考以下文章