javaweb之ajax

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
success(data)	请求成功的回调函数
error	请求失败的回调函数

jQuery.post(url, [data], [callback], [type])

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

3、ajax案例

AuToFull.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">*{margin:0px;padding:0px;}#container{/* 宽度 */width:80%;/* 边框 *//* border:1px solid red; *//* 高度 */height:500px;/* 外边距  作用：居中 */margin:0 auto;/* 文本水平对其方式 */text-align: center;}#container input{width:60%;height:40px;font-size:20px;}#container button{width:60px;height:40px;}#container>#content{width:60%;border:1px solid red;height:120px; margin:0 auto;text-align: left;/* 当标签中的内容超出范围，可以使用overflow属性加滚动条 */overflow: auto;}
</style>
<!-- 通过CDN远程服务加载jQuery类库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">$(function(){$("#content").hide();//拿到输入框  失去焦点事件//keyup 按键事件$("#searchName").keyup(function(){var searchName = $(this).val();if(!searchName){$("#content").html("无记录");window.setTimeout(function(){$("#content").hide();},2000);return;}$("#content").show();//将获取的关键词传入servlet  通过ajax  post()$.post("autoFull.do",{"searchName":searchName},function(data){//由于servlet中返回出来的数据  是data   stringvar objList = $.parseJSON(data);//console.log($.type(obj))//index 下标//obj  对象  let strName = "";$.each(objList,function(index,obj){//console.log(index,obj);//name 属性名称//value 属性值strName +="<div style = 'cursor:pointer;' onmouseout = 'this.style.background=\"\"' onmouseover = 'this.style.background=\"red\"'  onclick = 'add(\""+obj.dname+"\")'>"+obj.dname+"</div>";});$("#content").html(strName);});});});</script></head>
<body><div id = "container"><input id = "searchName" type = "text"/><div id = "content"></div></div><script type="text/javascript">function add(dname){//console.log(dname);$("#searchName").val(dname);$("#content").slideUp(1000);}</script>
</body>
</html>

AutoFullServlet.java

package com.zking.jsom.test;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.json.servlet.Diaosi;public class AutoFullServlet extends HttpServlet {// 数据访问层 业务逻辑层public List<Diaosi> queryDiaosiAll() {List<Diaosi> list = new ArrayList<Diaosi>();for (int i = 0; i < 300; i++) {if (i >= 0 && i < 100) {list.add(new Diaosi("哈哈" + i, "女", 1 + i));} else if (i >= 100 && i < 200) {list.add(new Diaosi("呵呵" + i, "女", 2 + i));} else {list.add(new Diaosi("嘻嘻" + i, "女", 3 + i));}}return list;}public List<Diaosi> queryDiaosiAll(String searchName) {// 获取所有List<Diaosi> queryDiaosiAll = queryDiaosiAll();// 创建一个新的集合保存模糊查询的结构集List<Diaosi> list = new ArrayList<Diaosi>();for (Diaosi diaosi : queryDiaosiAll) {if (diaosi.getDname().contains(searchName)) {list.add(diaosi);}}return list;}protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");// 获取搜索的关键词String searchName = request.getParameter("searchName");if (searchName == null) {searchName = "";}// 调用bizList<Diaosi> queryDiaosiAll = queryDiaosiAll(searchName);// 获取out对象PrintWriter out = response.getWriter();// 因为out对象中只能传递字符串类型以及其它基本类型// 需要将模糊查询的结果集转换成字符串（满足JSON格式）ObjectMapper mapper = new ObjectMapper();String diaosiAll = mapper.writeValueAsString(queryDiaosiAll);out.write(diaosiAll);out.flush();out.close();}}

javaweb之ajax相关推荐

JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
javaweb 之Ajax
2019独角兽企业重金招聘Python工程师标准>>> AJAX what: 一种改善客户端体验的技术.本质上就是在客户端使用js代码,通过浏览器中一个特殊的对象(XMLHttpRe ...
JavaWeb：AJAX
1. AJAX概述 1.1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Ja ...
IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题
2019独角兽企业重金招聘Python工程师标准>>> Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaSc ...
JavaWEB（AJAX实现分页）
4.2 使用AJAX实现分页 4.2.1 需求需要将分页数据通过ajax的方式进行分页,实现只变更部分数据的功能. 4.2.2 实现原理 1.设置Servlet的response的格式为applic ...
JavaWeb开发 —— Ajax
目录一.介绍二.原生Ajax 三.Axios 四.案例分析一.介绍 ① 概念:Asynchronous JavaScript And XML,异步的JavaScript和XML. ② 作用: 数 ...
【JavaWeb】AJAX
目录一.AJAX概述 1.AJAX介绍 2.AJAX优点 3.AJAX工作原理二.AJAX应用 1.AJAX快速入门 1.1.第一步:获取一个XMLHttpRequest对象 1.2.第二步:设置 ...
javaWeb(七)ajax远程调用
1.处理ajax请求的时候页面不允许跳转(默认使用的是异步请求),并且在ajax使用的时候,不能使用el表达式 2.调用方法 $.ajax([json指令]); $.ajax({ url:" ...
Javaweb（AJAX快速入门）
中哈喽丫各位本次讲jweb的(AJAX快速入门&&AJAX实现分页) 好了直接进入主题在进入主题前看看本次思维导图 ==========================jQuery之 ...

javaweb之ajax

目录

javaweb之ajax相关推荐

最新文章

热门文章