0
点赞
收藏
分享

微信扫一扫

AJAX局部刷新功能实现

Sky飞羽 2022-04-16 阅读 178
Ajax

简介

AJAX 是与浏览器与服务器交换数据的技术,它在不重载全部页面的情况下,实现了前后台数据交互,可以选择操作dom对页面进行更新

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本(text)、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示:如果没有 jQuery,AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能

常用属性参数

参 数类 型说 明
urlString发送请求的地址,默认为当前页地址
typeString请求方式,默认为GET
dataPlainObject或 String或Array发送到服务器的数据
dataTypeString预期服务器返回的数据类型,包括:XML、HTML、Script、JSON、JSONP、text
timeoutNumber设置请求超时时间
globalBoolean表示是否触发全局Ajax事件,默认为true
beforeSendfunction发送请求前调用的函数
successfunction请求成功后调用的函数参数result:可选,由服务器返回的数据
errorfunction请求失败时调用的函数
completefunction请求完成后(无论成功还是失败)调用的函数
contentTypeString默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。
asyncBooleantrue。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
$.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);
}

}

祝各位大佬前途似锦!!!!

举报

相关推荐

0 条评论