AJAX实现局部刷新功能
发布时间 - 2026-01-11 01:43:30 点击率：次目录
- 简介
- 常用属性参数
- 后台响应
- JSON
简介
AJAX 是与浏览器与服务器交换数据的技术，它在不重载全部页面的情况下，实现了前后台数据交互，可以选择操作dom对页面进行更新
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本（text）、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能
常用属性参数
$.ajax( {
"url" : "url", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"beforeSend": function() { 请求之前的方法
}
"success" : function(result) { // 请求成功后要执行的代码
},
"error" : function() { // 请求失败后要执行的代码
}
} );
var data ={}
后台响应
使用ajax进行增删改查时get、post方法都能实现其功能。但是出于数据安全性的考虑，数据的添加和修改最好不要使用get方法。当数据量极大的时候，数据的获取也不建议采用get方法。get方法数据传输速度快但不能传大数据，传输不安全，post方法适用于传输大数据，传输速度比get较慢但安全性高。 如：当获取某个实体类集合的时候
举例
@WebServlet("/back/facebook/facebookmanage")
public class FacebookManageServlet extends HttpServlet {
IFacebookService facebookService = new FacebookServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
String fid = req.getParameter("id");
int id = 0;
if (!"".equals(fid))
id = Integer.parseInt(fid);
int result = facebookService.deleteFacebook(id);
resp.getWriter().print(result);
}
注意
resp.setContentType中的值根据前台所要接收的对应的数据类型来填写，dataType是json类型则填写"application/json"，其他则为"text/html;charset=utf-8"。这是因为前后台的编码类型不一样所导致。
其实没有多大意义。success里的result接受到值之后，你可以把它转成json数据然后通过点的方式去获取数据
方法是：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj);//可以将json对象转换成json对符串
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
resp.getWriter().print()可以传对象
resp.getWriter().writer()只能传字符串
需要灵活运用
JSON
简介
JSON（JavaScript Object Notation） 一种轻量级的数据交换格式 采用独立于语言的文本格式 通常用于在客户端和服务器之间传递数据
优点
JSON的优点 轻量级交互语言 结构简单 易于解析
定义JSON对象
var person = { "name" : "张三", "age" : 30, "spouse" : null };
定义JSON数组
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三", "age":30 },
{ "name":"李四", "age":40 } ];
第一步 ajax jsp 页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
background: url(ad.jpg) top left;
background-size: 100%;
}
span {
color: blue;
font-size: 30px;
}
#a {
font-size: 20px;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center">
<h1 style="color: red">新增图书信息</h1>
<form action="${pageContext.request.contextPath}/jsp/AddbookServlet" method="get">
<div>
<span>图书名称：</span><input type="text" name="name" />
</div>
<br>
<div>
<span>图书作者：</span><input type="text" name="author" />
</div>
<br>
<div>
<span>购买日期：</span><input type="text" name="data" />
</div>
<br>
<div>
<span> 图书类别：</span>
<select id="typebook" name="typebook1" style="color: red">
<option value="0" >选择所属分类</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
</divcone>
<br>
<div>
<span> </span><input type="submit" value="增加图书" name="subbook" id="subbooks"
style="font-size: 30px " />
</div>
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("input[name=name]").blur(function (){
/* if($("input[name=name]").val()==""){
return;
} */
var data ={"name":$("input[name=name]").val()}
$.ajax( {
"url" : "NamebookServlet", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
if(result=='true'){
alert("图书名称和作者名称不能为空")
$("input[name=name]").val("格式为（xxx）");
$("input[name=name]").focus();
console.log("图书名称和作者名称不能为空11111");
return;
}
},
"error" : function() {
// 请求失败后要执行的代码
}
} );
})
$("input[name=author]").blur(function (){
var data ={"author":$("input[name=author]").val()}
$.ajax( {
"url" : "AuthorbookServlet", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
if(result=='true'){
alert("图书名称和作者名称不能为空")
$("input[name=author]").val("格式为（xxx）");
$("input[name=author]").focus();
console.log("图书名称和作者名称不能为空11111");
return;
}
},
"error" : function() {
// 请求失败后要执行的代码
}
} );
})
$("input[name=data]").blur(function (){
var data ={"data":$("input[name=data]").val()}
if($("input[name=data]").val()==""){
$("input[name=data]").val("格式为（yyyy-MM-dd）");
alert("时期格式错误")
return;
}
$.ajax( {
"url" : "DatabookServlet", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
if(result=='true'){
alert("时期格式错误")
$("input[name=data]").val("格式为（yyyy-MM-dd）");
$("input[name=data]").focus();
console.log("时期格式错误11111");
return;
}
},
"error" : function() {
// 请求失败后要执行的代码
}
} );
})
$("#typebook").blur(function (){
var data ={"data":$("#typebook").val()}
if($("#typebook").val()=="0"){
alert("先选择图书分类")
}
})
$("$(input[name=subbook])").click(function (){
var data ={}
$.ajax( {
"url" : "AddbookServlet", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"success" : function(result) { // 请求成功后要执行的代码
if(result=='true'){
alert("添加图书成功")
return;
}else{
alert("添加图书失败")
}
},
"error" : function() {
// 请求失败后要执行的代码
}
} );
})
</script>
</div>
</body>
</html>
第二步 处理ajax请求 响应结果
package webDemo05.kgc.Servletbook;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.services.Sercicesdao;
/**
* Servlet implementation class AddbookServlet
*/
@WebServlet("/jsp/AddbookServlet")
public class AddbookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AddbookServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF8");
response.setCharacterEncoding("UTF8");
response.setContentType("text/html;charset=utf-8");
Sercicesdao sd = new Sercicesdao();
String name = request.getParameter("name");
String author = request.getParameter("author");
String date = request.getParameter("data");
String typebook = request.getParameter("typebook1");
try {
/*SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); //格式化规则
Date date = user.getTime(); //获得你要处理的时间 Date型
String strDate= sdf.format(date ); //格式化成yyyy-MM-dd格式的时间字符串
Date newDate =sdf.parse(strDate);
java.sql.Date resultDate = new java.sql.Date(newDate.getTime());//最后转换成 java.sql.Date类型数据就可以了 注意：最开始时间数据类型是 java.util.Date类型
*/
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
//格式化规则
java.sql.Date date2 = new java.sql.Date(sdf.parse(date).getTime());
System.out.println(date2);
Book book = new Book(Integer.valueOf(1),name,author,date2,typebook);
boolean addb = sd.addb(book);
if(addb) {
response.getWriter().print(true);
response.sendRedirect("addbook.jsp");
return;
}else {
request.getRequestDispatcher("addbook.jsp").forward(request, response);
return;
}
} catch (ParseException e) {
e.printStackTrace();
}
//称：</span><input type="text" name="name" />
//
//
//
//者：</span><input type="text" name="author" />
//
//
//
//期：</span><input type="Date" name="data" />
//
//
//
//sp;图书类别：</span>
//ame="typebook" style="color: red">
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package webDemo05.kgc.Servletbook;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import webDemo05.kgc.pojo.Book;
import webDemo05.kgc.pojo.RandInfo;
import webDemo05.kgc.services.Sercicesdao;
/**
* Servlet implementation class Addbook2Servlet
*/
@WebServlet("/jsp/Addbook2Servlet")
public class Addbook2Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Addbook2Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
//格式化规则
for (int i = 0; i < 2; i++) {
Sercicesdao sd = new Sercicesdao();
RandInfo rr = new RandInfo();
String date2=new Date().toString();
Book book = new Book(Integer.valueOf(1),rr.getFemaleName()+"笔记",rr.getFemaleName(),new Date(),"计算机/软件");
sd.addb(book);
}
response.sendRedirect("LonginServlet");
return;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
package webDemo05.kgc.Servletbook;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AuthorbookServlet
*/
@WebServlet("/jsp/AuthorbookServlet")
public class AuthorbookServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AuthorbookServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
String author = req.getParameter("author");
if(author==null||"".equals(author.trim())) {
resp.getWriter().print(true);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
以上就是AJAX实现局部刷新功能的详细内容，更多关于AJAX局部刷新的资料请关注其它相关文章！
# AJAX局部刷新
# AJAX刷新
# 实现AJAX异步调用和局部刷新的基本步骤
# Ajax实现局部刷新的方法实例
# JQuery 又谈ajax局部刷新
# ajax局部刷新实例 (三种方法推荐)
# 纯JS实现AJAX局部刷新功能
# 发送到
# 转换成
# 数据格式
# 为空
# 格式为
# 您能
# 就可以
# 也不
# 你可以
# 多个
# 你要
# 都能
# 适用于
# 把它
# 相关文章
# 俄罗斯
# 如果没有
# 多大
# 只需要
# 美国
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】
Python结构化数据采集_字段抽取解析【教程】
如何在香港免费服务器上快速搭建网站？
Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践
Laravel API资源类怎么用_Laravel API Resource数据转换
Laravel队列由Redis驱动怎么配置_Laravel Redis队列使用教程
长沙做网站要多少钱,长沙国安网络怎么样？
Laravel如何构建RESTful API_Laravel标准化API接口开发指南
再谈Python中的字符串与字符编码（推荐）
Laravel怎么在Controller之外的地方验证数据
Linux安全能力提升路径_长期防护思维说明【指导】
如何在云主机上快速搭建网站？
Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置
JavaScript如何实现类型判断_typeof和instanceof有什么区别
Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲
Win11怎样安装网易有道词典_Win11安装词典教程【步骤】
JavaScript中的标签模板是什么_它如何扩展字符串功能
零基础网站服务器架设实战：轻量应用与域名解析配置指南
高端建站三要素：定制模板、企业官网与响应式设计优化
Laravel PHP版本要求一览_Laravel各版本环境要求对照
购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？
php在windows下怎么调试_phpwindows环境调试操作说明【操作】
Laravel怎么解决跨域问题_Laravel配置CORS跨域访问
简单实现Android文件上传
Laravel如何发送系统通知？（Notification渠道示例）
如何将凡科建站内容保存为本地文件？
Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】
jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】
Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权
使用豆包 AI 辅助进行简单网页 HTML 结构设计
韩国服务器如何优化跨境访问实现高效连接？
Laravel的.env文件有什么用_Laravel环境变量配置与管理详解
如何在IIS服务器上快速部署高效网站？
java中使用zxing批量生成二维码立牌
如何做网站制作流程,*游戏网站怎么搭建？
韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐
LinuxCD持续部署教程_自动发布与回滚机制
Python自然语言搜索引擎项目教程_倒排索引查询优化案例
开心动漫网站制作软件下载,十分开心动画为何停播？
如何在景安云服务器上绑定域名并配置虚拟主机？
Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】
如何在不使用负向后查找的情况下匹配特定条件前的换行符
HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】
动图在线制作网站有哪些,滑动动图图集怎么做？
Laravel如何与Inertia.js和Vue/React构建现代单页应用
百度浏览器网页无法复制文字怎么办 百度浏览器复制修复
企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？
WEB开发之注册页面验证码倒计时代码的实现
iOS UIView常见属性方法小结
WordPress 子目录安装中正确处理脚本路径的完整指南
下一篇：天天基金如何取消定投
下一篇：天天基金如何取消定投