ajax的作用

最新推荐文章于 2025-04-23 12:57:09 发布

昂761

最新推荐文章于 2025-04-23 12:57:09 发布

阅读量841

点赞数

文章标签： eclipse

本文链接：https://blog.youkuaiyun.com/weixin_65088316/article/details/124496530

版权

一ajax简介

AJAX的作用:
实现即时检查用户名是否可用
实现搜索自动提示【自动补全】

二为什么要用ajax

无刷新：不刷新整个页面，只刷新局部

无刷新的好处

只更新部分页面，有效利用带宽，提高用户体验

三ajax有两个方法

$.ajax():
Url:一个用来包含发送请求的URL字符串(请求地址)
Type:请求方式 (“POST” 或 “GET“[默认])
Data:发送到服务器的数据(参数)
dataType:预期服务器返回的数据类型(xml、json、text)
success(data):请求成功的回调函数
Error:请求失败的回调函数
--------$.post()
二．这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
Url:一个用来包含发送请求的URL字符串(请求地址)
Type:请求方式 (“POST” 或 “GET“[默认])
success(data):请求成功的回调函数
Data:发送到服务器的数据(参数)

四.

工具：集合--->json格式的String

Fastjson(要导入jar包)

JSON.toJSONString();

json格式的字符串解析成一个对象/对象数组

1.js的方式 eval()

2.jQuery的方式 $.parseJSON()

5页面展示

<%@ 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>

<title>Insert title here</title>

$(function() {

//默认当前页为第一页

var pageIndex = 1;

var totalPage = 1;

//页面加载完成默认执行一次查询

getGoods(pageIndex);

//首页

$("#fistPage").click(function() {

pageIndex = 1;

getGoods(pageIndex);

});

//上一页

$("#SPage").click(function() {

if(pageIndex > 1)

pageIndex--;

getGoods(pageIndex);

});

//下一页

$("#nextPage").click(function() {

if(pageIndex < totalPage)

pageIndex++;

getGoods(pageIndex);

});

//尾页

$("#lastPage").click(function() {

pageIndex = totalPage;

getGoods(pageIndex);

});

//分页查询函数

function getGoods(pid) {

$.ajax({

url: 'goods',

data: {

pageIndex: pid

type: 'get',

dataType: 'json',

success: function(data) {

//表头的定义

let table = "<table border='1px'><tr><td>编号</td><td>商品名称</td><td>价格</td></tr>";

//循环输出每一行

$.each(data.pageData, function(index, val) {

table += "<tr>";

table += "<td>" + val.gid + "</td>";

table += "<td>" + val.gname + "</td>";

table += "<td>" + val.gprice + "</td>";

table += "</tr>";

}

);

//加入结束标记

table += "</table>";

//将table加入容器

$("#goodsTable").html(table);

//获取最大页码

totalPage = data.totalPages;

}

});

};

})

</script>

</head>

<body>

<div>

</div>

</body>

</html>