javaweb之ajax

目录

一、为什么使用ajax

二、什么是ajax

三、案例


1、为什么使用ajax

无刷新:不刷新整个页面,只刷新局部

无刷新的好处 只更新部分页面,有效利用带宽,提高用户体验

2.什么是ajax

只刷新局部页面的技术

JavaScript:更新局部的网页

XML:一般用于请求数据和响应数据的封装

XMLHttpRequest对象:发送请求到服务器并获得返回结果

CSS:美化页面样式 异步:发送请求后不等返回结果,由回调函数处理结果

jQuery.ajax(url,[settings])

常用参数

说    明

url

一个用来包含发送请求的URL字符串(请求地址)

type

请求方式 (“POST” 或 “GET“[默认])

data

发送到服务器的数据(参数)

dataType

预期服务器返回的数据类型(xml、json、text)

success(data)

请求成功的回调函数

error

请求失败的回调函数

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

常用参数

说    明

url

一个用来包含发送请求的URL字符串(请求地址)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现基于 AJAX 的级联下拉菜单可以按照以下步骤进行: 1. 引入 jQuery 库和 AJAX 请求的相关库。 ```html <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script> ``` 2. 在页面上定义两个下拉菜单,一个是父级菜单,一个是子级菜单。 ```html <select id="parent" name="parent" onchange="getChildren()"> <option value="">请选择父级菜单</option> <option value="1">菜单1</option> <option value="2">菜单2</option> <option value="3">菜单3</option> </select> <select id="child" name="child"> <option value="">请选择子级菜单</option> </select> ``` 3. 编写 AJAX 请求的代码,获取子级菜单的数据,并根据数据动态生成子级菜单的选项。 ```javascript function getChildren() { var parentId = $("#parent").val(); if (parentId == "") { $("#child").html("<option value=''>请选择子级菜单</option>"); return; } $.ajax({ type: "GET", url: "/menu/getChildren", data: { parentId: parentId }, dataType: "json", success: function (data) { var html = "<option value=''>请选择子级菜单</option>"; $.each(data, function (i, item) { html += "<option value='" + item.id + "'>" + item.name + "</option>"; }); $("#child").html(html); }, error: function () { alert("请求失败,请稍后再试!"); } }); } ``` 4. 在后台编写获取子级菜单数据的代码,并返回 JSON 格式的数据。 以上就是基于 AJAX 的级联下拉菜单的实现步骤。需要注意的是,后台返回的子菜单数据应该是以 JSON 格式返回,前端通过 AJAX 请求获取到数据后,需要动态生成子级菜单的选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值