JavaWeb中的Ajax

本笔记基于【尚硅谷全新JavaWeb教程,企业主流javaweb技术栈】https://www.bilibili.com/video/BV1UN411x7xe?vd_source=a91dafe0f846ad7bd19625e392cf76d8总结

Ajax

什么是ajax

  • AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

  • AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

  • AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行。

  • XMLHttpRequest 只是实现 Ajax 的一种方式。

ajax工作原理:

  • 简单来说,我们之前发的请求通过类似 form表单标签,a标签 这种方式,现在通过 运行js代码动态决定什么时候发送什么样的请求
  • 通过运行JS代码发送的请求浏览器可以不用跳转页面 ,我们可以在JS代码中决定是否要跳转页面
  • 通过运行JS代码发送的请求,接收到返回结果后,我们可以将结果通过dom编程渲染到页面的某些元素上,实现局部更新

如何实现ajax请求

原生javascript方式进行ajax(了解):

<script>
  function loadXMLDoc(){
    var xmlhttp=new XMLHttpRequest();
      // 设置回调函数处理响应结果
    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }
      // 设置请求方式和请求的资源路径
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
      // 发送请求
    xmlhttp.send();
  }
</script> 
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值