JavaWeb之Ajax的基本使用與實(shí)戰(zhàn)案例
更新時(shí)間：2022年08月02日 09:55:47 作者：時(shí)宜
ajax技術(shù)是使頁(yè)面能局部刷新的一種技術(shù),下面這篇文章主要給大家介紹了關(guān)于JavaWeb之Ajax的基本使用與實(shí)戰(zhàn)案例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、Ajax是什么？
Ajax，全稱(chēng)Asynchronous JavaScript and XML ，也就是異步加載的javascript 和 XML
.Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
JavaScript：更新局部的網(wǎng)頁(yè)
XML：一般用于請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)的封裝
XMLHttpRequest對(duì)象：發(fā)送請(qǐng)求到服務(wù)器并獲得返回結(jié)果
CSS：美化頁(yè)面樣式
異步：發(fā)送請(qǐng)求后不等返回結(jié)果，由回調(diào)函數(shù)處理結(jié)果
二、為什么使用Ajax？
??無(wú)刷新：不刷新整個(gè)頁(yè)面，只刷新局部
??無(wú)刷新的好處：只更新部分頁(yè)面，有效利用帶寬，提高用戶體驗(yàn)
三、Ajax基本使用
??通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。
1、$.ajax()
| 常用參數(shù) | 說(shuō)明 |
| url | 一個(gè)用來(lái)包含發(fā)送請(qǐng)求的URL字符串(請(qǐng)求地址) |
| type | 請(qǐng)求方式 (“POST” 或 “GET“[默認(rèn)]) |
| data | 發(fā)送到服務(wù)器的數(shù)據(jù)(參數(shù)) |
| dataType | 預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型(xml、json、text) |
| dataType | 請(qǐng)求成功的回調(diào)函數(shù) |
| error | 請(qǐng)求失敗的回調(diào)函數(shù) |
??通過(guò)遠(yuǎn)程 HTTP POST /GET請(qǐng)求載入信息。
這是一個(gè)簡(jiǎn)單的 POST /GET請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù)，請(qǐng)使用 $.ajax。
2、$.post()
常用參數(shù) | 說(shuō) 明 |
url | 一個(gè)用來(lái)包含發(fā)送請(qǐng)求的URL字符串(請(qǐng)求地址) |
data | 發(fā)送到服務(wù)器的數(shù)據(jù)(參數(shù)) key/value |
success(data) | 請(qǐng)求成功的回調(diào)函數(shù) |
type | 返回內(nèi)容格式(xml、json、text等) |
3.$.get()
常用參數(shù) | 說(shuō) 明 |
url | 一個(gè)用來(lái)包含發(fā)送請(qǐng)求的URL字符串(請(qǐng)求地址) |
data | 發(fā)送到服務(wù)器的數(shù)據(jù)(參數(shù)) key/value |
success(data) | 請(qǐng)求成功的回調(diào)函數(shù) |
type | 返回內(nèi)容格式(xml、json、text等) |
三種方法代碼如下：
$.get("url",data,fun(){},"text")
$.post("url",data,fun(){},"text")
$.ajax({
url:"",
type:"get|post",
data:{},
dataType:"",
success(){}
})四、案例
無(wú)刷新登錄（ajax、get、post）
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<link rel="icon" href="Icon/bb.png" rel="external nofollow" type="text/x-icon">
</head>
<body>
<div>
<p><input id="account" name="account"></p>
<p><input id="password" name="password"></p>
<button onclick="login()">登錄</button>
</div>
<script>
function login() {
//取到頁(yè)面的值
let account = $("#account").val()
let password = $("#password").val()
//通過(guò)jquery來(lái)發(fā)送請(qǐng)求ajax去后臺(tái) login.do
//ajax方法：get|post
$.ajax({
url:"login.do",//訪問(wèn)地址
data:{account,password},//攜帶的數(shù)據(jù)
dataType:"text",//希望后臺(tái)給你什么樣子的數(shù)據(jù)
type: "get",//什么請(qǐng)求類(lèi)型
success(resp){
if (resp.trim() === "yes") {
alert("登陸成功")
location.href = "index.jsp"
} else {
alert("登陸失敗")
}
},//成功
error(){
}//錯(cuò)誤
})
//get請(qǐng)求
/**
$.get(
//請(qǐng)求地址
"login.do",
//攜帶過(guò)去的數(shù)據(jù) 直接放數(shù)據(jù),名字就是數(shù)據(jù)的名字
{account, password},
//回調(diào)函數(shù) 請(qǐng)求之后會(huì)調(diào)用這個(gè)函數(shù)
//resp就是后臺(tái)給我的值
function (resp) {
//trim 去空格
//contains 包含
if (resp.trim() === "yes") {
alert("登陸成功")
location.href = "index.jsp"
} else {
alert("登陸失敗")
}
},
"text" //希望后臺(tái)給我的是普通的文本
)
**/
/**
$.get("url",data,fun(){},"text")
$.post("url",data,fun(){},"text")
$.ajax({
url:"",
type:"get|post",
data:{},
dataType:"",
success(){}
})
**/
}
</script>
</body>
</html>LoginServlet.java
ackage com.zking.servlet;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//獲取表單數(shù)據(jù)
String account = req.getParameter("account");
String password = req.getParameter("password");
//調(diào)用biz去數(shù)據(jù)庫(kù)做驗(yàn)證
PrintWriter out = resp.getWriter();
if("root".equals(account)&&"root123".equals(password)){
out.println("yes");
}else{
out.println("no");
}
}
}查詢(xún)名字是否存在
效果圖如下：
如果輸入的內(nèi)容在集合中有的話則提示用戶名已經(jīng)存在 并且按鈕禁用
若沒(méi)有則顯示??標(biāo)簽
register.java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<style>
#tip{
color: red;
}
</style>
</head>
<body>
<p><input id="name" onkeyup="yz()" type="text" placeholder="請(qǐng)輸入你的用戶名"><span id="tip"></span></p>
<button id="register">去注冊(cè)</button>
<script>
function yz(){
//獲取數(shù)據(jù)
let name=$("#name").val();
console.log(name)
//發(fā)送請(qǐng)求
$.get("find.do",{name},(resp)=>{
if(resp.trim()==="true"){
$("#tip").text("用戶名已經(jīng)存在")
$("#register").prop("disabled",true)
}else{
$("#tip").text("????")
$("#register").prop("disabled",false)
}
},"text")
}
</script>
</body>
</html>FindServlet.java
package com.zking.servlet;
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 java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
/**
* 驗(yàn)證用戶名是否存在
**/
@SuppressWarnings("all")
@WebServlet("/find.do")
public class FindServlet extends HttpServlet {
//數(shù)據(jù)庫(kù)中存在的名字
List<String> list = new ArrayList<String>();
{
list.add("小明");
list.add("小黃");
list.add("小黑");
list.add("小紫");
list.add("小綠");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//去數(shù)據(jù)庫(kù)查詢(xún)
String name = req.getParameter("name");
boolean f=false;
for (String n : list) {
if(n.equals(name)){
f=true;
break;
}
}
//需要把結(jié)果告訴前臺(tái)
PrintWriter out = resp.getWriter();
out.println(f);
}
}使用搜索框時(shí)彈出的提示
效果圖如下：
index.java
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
??<input id="keyWord" name="keyWord" onkeyup="search()">
<ul id="list">
</ul>
<script>
function search(){
//得到輸入框的值
let keyWord=$("#keyWord").val()
//發(fā)送到負(fù)責(zé)檢索商品名稱(chēng)的servlet
$.get("search.do",{keyWord},(resp)=>{
//清空原來(lái)的選項(xiàng)
$("#list").empty()
//resp現(xiàn)在是從字符串變成了數(shù)組
for(let n of resp){//foreach
$("#list").append("<li>"+n+"</li>")
}
},"json");
}
//json
//對(duì)象的字符串格式,json有固定的格式
//將對(duì)象變成json
//將json還原為對(duì)象
</script>
</body>
</html>SearchServlet.java
package com.zking.servlet;
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 com.fasterxml.jackson.databind.ObjectMapper;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
/**
* 查詢(xún)出對(duì)應(yīng)關(guān)鍵字的商品名稱(chēng)
**/
@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {
//數(shù)據(jù)庫(kù)中存在的商品名字
List<String> list = new ArrayList<String>();
{
list.add("楊枝甘露");
list.add("珍珠奶茶");
list.add("焦糖奶茶");
list.add("雀巢咖啡");
list.add("蜜桃四季春");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//去數(shù)據(jù)庫(kù)查詢(xún)
String keyWord = req.getParameter("keyWord");
//新建一個(gè)集合
List<String> ns=new ArrayList<String>();
for (String n : list) {
if(n.contains(keyWord)){
ns.add(n);
}
}
//設(shè)置響應(yīng)的編號(hào)
resp.setCharacterEncoding("utf-8");
//需要把結(jié)果告訴前臺(tái)
PrintWriter out = resp.getWriter();
//需要將集合變成json
//1.需要獲取轉(zhuǎn)換對(duì)象
ObjectMapper mapper=new ObjectMapper();
//2.調(diào)用方法
String str = mapper.writeValueAsString(ns);
out.println(str);
}
}注意： 遍歷出來(lái)的集合要變成jsno字符串
總結(jié)
到此這篇關(guān)于JavaWeb之Ajax的基本使用與案例的文章就介紹到這了,更多相關(guān)JavaWeb Ajax基本使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Springboot下載excel文件中文名亂碼問(wèn)題及解決
這篇文章主要介紹了Springboot下載excel文件中文名亂碼問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Spring事務(wù)中@Transactional注解不生效的原因分析與解決
在Spring框架中,@Transactional注解是管理數(shù)據(jù)庫(kù)事務(wù)的核心方式,本文將深入分析事務(wù)自調(diào)用的底層原理,解釋為什么事務(wù)不生效,并提供多種解決方案,希望對(duì)大家有所幫助2025-03-03
這篇文章主要介紹了@feignclient名字沖突的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-10-10
Mybatis插件+注解實(shí)現(xiàn)數(shù)據(jù)脫敏方式
這篇文章主要介紹了Mybatis插件+注解實(shí)現(xiàn)數(shù)據(jù)脫敏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
關(guān)于IDEA 2020使用 mybatis-log-plugin插件的問(wèn)題
這篇文章主要介紹了關(guān)于IDEA 2020使用 mybatis-log-plugin插件的問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
SpringMVC日期類(lèi)型接收空值異常問(wèn)題解決方法
這篇文章主要介紹了SpringMVC日期類(lèi)型接收空值異常問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
基于logback實(shí)現(xiàn)純java版本的SDK組件
這篇文章主要介紹了基于logback實(shí)現(xiàn)純java版本的SDK組件,在項(xiàng)目開(kāi)發(fā)過(guò)程中通常會(huì)使用logback作為日志記錄的依賴(lài)工具,使用方式是引入logback相關(guān)jar包,然后配置logback.xml配置文件的方式來(lái)實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
CCF考試試題之門(mén)禁系統(tǒng)java解題代碼
這篇文章主要為大家詳細(xì)介紹了CCF考試試題之門(mén)禁系統(tǒng)java解題代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
mybatis修改int型數(shù)據(jù)無(wú)法修改成0的解決
這篇文章主要介紹了mybatis修改int型數(shù)據(jù)無(wú)法修改成0的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
Spring Boot 整合 Druid 并開(kāi)啟監(jiān)控的操作方法
本文介紹了如何在SpringBoot項(xiàng)目中引入和配置Druid數(shù)據(jù)庫(kù)連接池,并開(kāi)啟其監(jiān)控功能,通過(guò)添加依賴(lài)、配置數(shù)據(jù)源、開(kāi)啟監(jiān)控、自定義配置以及訪問(wèn)監(jiān)控頁(yè)面,開(kāi)發(fā)者可以有效提高數(shù)據(jù)庫(kù)訪問(wèn)效率并監(jiān)控連接池狀態(tài),感興趣的朋友跟隨小編一起看看吧2025-01-01