jQuery_Ajax学习笔记

最新推荐文章于 2022-04-11 11:15:49 发布
最新推荐文章于 2022-04-11 11:15:49 发布
阅读量318 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42002500/article/details/115219465
版权

文章目录

学习资源

视频教程：Java基础+进阶_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

jQuery

1、概念

概念：JavaScript框架，简化JS开发

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
2、快速入门
步骤

  1. 下载JQuery

  2. 导入JQuery的js文件：导入min.js文件

  3. 使用

var div1 = $("#div1");

注：这个jQuery文件就是一个立即执行函数，函数名为$

3、jQuery对象和js对象的区别和转化

JQuery对象和js对象方法不通用的.

  • 两者相互转换
    • jq – > js : jq对象[索引] 或者 jq对象.get(索引)
      • 因为jq对象是一个伪数组，所以可以通过索引来获取
    • js – > jq : $(js对象)
4、选择器
基本操作学习

  1. 事件绑定

     //1.获取b1按钮
 $("#b1").click(function(){
     alert("abc");
});

  2. 入口函数

    //jQuery入口函数（dom文档加载完成之后执行该函数的代码）
$(function () {
	});

    window.onload 和 $(function) 区别

    • window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉。而$(function)可以定义多次的。
    • 执行时机不同：jQuery入口函数要快于window.onload
      • jQuery入口函数要等待页面上dom树加载完后执行
      • window.onload要等待页面上所有的资源（外部css/js链接，图片等资源）都加载完毕后执行

  3. 样式控制：css方法

    // $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
$("#div1").css({
    "width": "300px",
    "height": "200px",
    "backgroundColor": "red"
})
分类

  1. 基本选择器

    1. 标签选择器（元素选择器）
      • 语法： $(“html标签名”) 获得所有匹配标签名称的元素
    2. id选择器
    • 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
    1. 类选择器
    • 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
    1. 并集选择器
    • 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

  2. 层级选择器

    1. 后代选择器
      • 语法： $("A B ") 选择A元素内部的所有B元素
    2. 子选择器
      • 语法： $(“A > B”) 选择A元素内部的所有B子元素

  3. 属性选择器

    1. 属性名称选择器
      • 语法： $(“A[属性名]”) 包含指定属性的选择器
    2. 属性选择器
      • 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
    3. 复合属性选择器
      • 语法： $(“A[属性名=‘值’]…”) 包含多个属性条件的选择器

  4. 过滤选择器

    1. 首元素选择器
      • 语法： :first 获得选择的元素中的第一个元素
    2. 尾元素选择器
      • 语法： :last 获得选择的元素中的最后一个元素
    3. 非元素选择器
      • 语法： :not(selector) 不包括指定内容的元素
    4. 偶数选择器
      • 语法： :even 偶数，从 0 开始计数
    5. 奇数选择器
      • 语法： :odd 奇数，从 0 开始计数
    6. 等于索引选择器
      • 语法： :eq(index) 指定索引元素
    7. 大于索引选择器
      • 语法： :gt(index) 大于指定索引元素
    8. 小于索引选择器
      • 语法： :lt(index) 小于指定索引元素
    9. 标题选择器
      • 语法： :header 获得标题（h1~h6）元素，固定写法

  5. 表单过滤选择器

    1. 可用元素选择器
      • 语法： :enabled 获得可用元素
    2. 不可用元素选择器
      • 语法： :disabled 获得不可用元素
    3. 选中选择器
      • 语法： :checked 获得单选/复选框选中的元素
    4. 选中选择器
      • 语法： :selected 获得下拉框选中的元素
5、DOM操作

  1. 内容操作

    1. html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
    2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
    3. val()： 获取/设置元素的value属性值

  2. 属性操作

    1. 通用属性操作

      1. attr(): 获取/设置元素的属性
      2. removeAttr():删除属性
      3. prop():获取/设置元素的属性
      4. removeProp():删除属性
        • attr和prop区别？
          1. 如果操作的是元素的固有属性，则建议使用prop
          2. 如果操作的是元素自定义的属性，则建议使用attr

    2. 对class属性操作

    3. addClass():添加class属性值

    4. removeClass():删除class属性值

    5. toggleClass():切换class属性

      • toggleClass(“one”):
        * 判断如果元素对象上存在class=“one”，则将属性值one删除掉。 如果元素对象上不存在class=“one”，则添加

    6. css():

  3. CRUD操作

    1. append():父元素将子元素追加到末尾

      • 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾

    2. prepend():父元素将子元素追加到开头

      • 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头

    3. appendTo():

      • 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾

    4. prependTo()：

      • 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

    5. after():添加元素到元素后边

      • 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系

    6. before():添加元素到元素前边

      • 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系

    7. insertAfter()

      • 对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系

    8. insertBefore()

      • 对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系

    9. remove():移除元素

      • 对象.remove():将对象删除掉

    10. empty():清空元素的所有后代元素。

      • 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

*注：获取data.*属性：对象.data(“属性名”);

获取父元素节点，子元素节点及兄弟元素节点的方法

父元素

  • parent()、parents()、closest()
    • parent：上一级父元素
    • closest与parents的区别
      1. closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找
      2. closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤
      3. closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素

子节点

  • find(),:first(),children()

兄弟节点

兄弟节点可以通过子父级之间的关系获取，也可使用函数 siblings() 获取

查找每个 p 元素的所有类名为 “selected” 的所有同胞元素：

$("p").siblings(".selected")
6、动画
  1. 三种方式显示和隐藏元素

    1. 默认显示和隐藏方式

      1. show([speed,[easing],[fn]])
        1. 参数：
          1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
        2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
        • swing：动画执行时效果是 先慢，中间快，最后又慢
        • linear：动画执行时速度是匀速的
        1. fn：在动画完成时执行的函数，每个元素执行一次。

    2. hide([speed,[easing],[fn]])

    3. toggle([speed],[easing],[fn])

    4. 滑动显示和隐藏方式

      1. slideDown([speed],[easing],[fn])
      2. slideUp([speed,[easing],[fn]])
      3. slideToggle([speed],[easing],[fn])

    5. 淡入淡出显示和隐藏方式

      1. fadeIn([speed],[easing],[fn])
      2. fadeOut([speed],[easing],[fn])
      3. fadeToggle([speed,[easing],[fn]])
7、遍历
  1. jq对象.each(callback)
    1. 语法：
      jquery对象.each(function(index,element){});
      • index:就是元素在集合中的索引
        • element：就是集合中的每一个元素对象
    • this：集合中的每一个元素对象
      2. 回调函数返回值：
      * true:如果当前function返回为false，则结束循环(break)。
      * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
  2. $.each(object, [callback])
  3. for…of: jquery 3.0 版本之后提供的方式
    for(元素对象 of 容器对象)
8、事件绑定
  1. jquery标准的绑定方式
    • jq对象.事件方法(回调函数)；
    • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
      • 表单对象.submit();//让表单提交
  2. on绑定事件/off解除绑定
  • jq对象.on(“事件名称”,回调函数)
  • jq对象.off(“事件名称”)
  • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
  1. 事件切换：toggle

  • jq对象.toggle(fn1,fn2…)

    • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

  • 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

事件委托

原生委托实现

document.getElementById("dateText").addEventListener("click",function (e) {
    console.log(e.target.dataset.name);
})

jQuery委托实现

$("#dateText").delegate("span", "click", function () {	console.log(this);})
9、插件

插件：增强jQuery的功能

实现方式

  1. $.fn.extend(object)
    • 增强通过Jquery获取的对象的功能 $("#id").fun()
  2. $.extend(object)
    • 增强jQuery对象自身的功能 $.fun()

eg：

//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框//1.定义jqeury的对象插件$.fn.extend({    //定义了一个check()方法。所有的jq对象都可以调用该方法    check: function () {        //让复选框选中        //this:调用该方法的jq对象        this.prop("checked", true);    },    uncheck: function () {        //让复选框不选中        this.prop("checked", false);    }});$(function () {    // 获取按钮    //$("#btn-check").check();    //复选框对象.check();    $("#btn-check").click(function () {        //获取复选框对象        $("input[type='checkbox']").check();    });    $("#btn-uncheck").click(function () {        //获取复选框对象        $("input[type='checkbox']").uncheck();    });});

eg：

//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值$.extend({    max: function (a, b) {        //返回两数中的较大值        return a >= b ? a : b;    },    min: function (a, b) {        //返回两数中的较小值        return a <= b ? a : b;    }});//调用全局方法var max = $.max(4, 3);var min = $.min(1, 2);

Ajax

1、概念

Ajax：Asynchronous JavaScript And XML 异步的JavaScript和XML

  • 异步和同步：客户端和服务器端相互通信的基础上
    • 同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
    • 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  • Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

image-20210325093126259

2、实现方式

  1. 原生的js实现方式

  2. jQuery实现方式

    1. $.ajax()

      • 语法：$.ajax({键值对});
      $.ajax({    url: "ajaxServlet",   //请求路径    type:"POST",    //请求方式    // data:"username=tom&age=23", //请求参数(前台向后台发送的数据)    data:{        "username":"tom",        "age":23    },	contentType: "application/json;charset=UTF-8",    success:function (data) {	//data是后台向前台返回的数据，data可以任意命名        alert(data)    },  //响应成功后的回调函数    error:function (data) {        alert(data)    },  //响应失败后的回调函数});

    url：   ​ajaxServlet:相对路径	​/ajaxServlet：从localhost:8080开始，data：（不使用form表单，获取任意一个元素的数据值）

    data: {
    “username”😒("#username").val()
    }, //请求参数

    2. $.get()：发送get请求   - 语法：$.get(url,[data],[callback],[type])     - 参数       - url：请求路径       - data：请求参数

         $(this).serialize()	//将请求参数序列化为字符串     ~~~   - callback：回调函数   - type：响应结果的类型
    1. $.post()：发送post请求

注：jQuery实现方法中，如果需要在出错时执行函数，需要使用$.ajax

Ajax整体实现过程

regist.html

//form表单    <form>        <input type="text" id="username" name="username" placeholder="请输入用户名">        <span id="s_username"></span>        <br>        <input type="password" name="password" placeholder="请输入密码"><br>        <input type="submit" value="注册"><br>    </form>        //jQuery实现ajax    <script>        //jQuery入口函数        $(function () {           //给username绑定blur事件 --> 失去焦点事件           $("#username").blur(function () {               //获取username文本输入框的值               var username = $(this).val();               //发送ajax请求               //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}               //                         {"userExsit":false,"msg":"用户名可用"}               $.get("findUserServlet",{username:username},function (data) {                   //判断userExsit键的值是否是true                   let span = $("#s_username");                   if(data.userExsit){                       //用户名存在                       span.css("color","red");                       span.html(data.msg);                   }else{                       //用户名不存在                       span.css("color","green");                       span.html(data.msg);                   }               });           });         });    </script>

FindUserServlet.java

//1.获取用户名String username = request.getParameter("username");//2.调用service层判断用户名是否存在//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}//                         {"userExsit":false,"msg":"用户名可用"}//设置响应的数据格式为jsonresponse.setContentType("application/json;charset=utf-8");Map<String, Object> map = new HashMap<>();if ("tom".equals(username)) {    //存在    map.put("userExsit", true);    map.put("msg", "此用户名太受欢迎,请更换一个");} else {    //不存在    map.put("userExsit", false);    map.put("msg", "用户名可用");}//将map转为json，并且传递给客户端//将map转为jsonObjectMapper mapper = new ObjectMapper();//并且传递给客户端mapper.writeValue(response.getWriter(), map);

一般使用异步提交表单，是为了获取服务器响应的数据。因为前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取相应数据。

跨域
什么是跨域？

跨域，即非同源策略请求。指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

  • http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
  • http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
  • http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
  • http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
  • http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

  1. 跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境
  2. 跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
  3. 浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略，否则就是跨域的HTTP请求，默认情况下是被禁止的。换句话说，浏览器安全的基石是同源策略。
什么是CORS?

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。

CORS Header

Access-Control-Allow-Origin: http://www.xxx.com
Access-Control-Max-Age：86400
Access-Control-Allow-Methods：GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Credentials: true
含义解释：
1、Access-Control-Allow-Origin 允许http://www.xxx.com域（自行设置，这里只做示例）发起跨域请求
2、Access-Control-Max-Age 设置在86400秒不需要再发送预校验请求
3、Access-Control-Allow-Methods 设置允许跨域请求的方法
4、Access-Control-Allow-Headers 允许跨域请求包含content-type
5、Access-Control-Allow-Credentials 设置允许Cookie

跨域会阻止什么操作？

浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询

  1. 阻止接口请求比较好理解，比如用ajax从http://192.168.100.150:8020/实验/jsonp.html页面向http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp发起请求，由于两个url端口不同，所以属于跨域，在console打印台会报No ‘Access-Control-Allow-Origin’ header is present on the requested resource

    • 值得说的是虽然浏览器禁止用户对请求返回数据的显示和操作，但浏览器确实是去请求了，如果服务器没有做限制的话会返回数据的，在调试模式的network中可以看到返回状态为200，且可看到返回数据

  2. 阻止dom获取和操作

    比如a页面中嵌入了iframe，src为不同源的b页面，则在a中无法操作b中的dom，也没有办法改变b中dom中的css样式。

浏览器的这个限制虽然不能保证完全安全，但是会增加攻击的困难性

虽然安全机制挺好，可以抵御坏人入侵，但有时我们自己需要跨域请求接口数据或者操作自己的dom，也被浏览器阻止了，所以就需要跨域

跨域的前提肯定是你和服务器是一伙的，你可以控制服务器返回的数据，否则跨域是无法完成的

怎么解决跨域问题？

1、前端方法使用jsonp

JSONP需要服务器端支持JSONP请求

原理就是html中 的link,href,src属性都是不受跨域影响的，link可以调用远程的css文件，href可以链接到随便的url上，图片的src可以随意引用图片，script的src属性可以随意引入不同源的js文件

  • script
  • img
  • link
  • iframe
  • …

这些标签不存在跨域请求限制

image-20210911105218301

eg：

$.ajax({  url: 'http://1.119.169.72:10001/lidarData/lidarData/selectViewData?time=2020-07-05&lidarType=dep&wavelength=355',  method: 'get',  dataType: 'jsonp', //=>执行的是JSONP请求  success: res => {    console.log(res);  }});

serverJsonp.js

let express = require('express'),  app = express();app.listen(10001, _ => {  console.log('ok');});app.get('/selectViewData', (req, res) => {  let {    callback = Function.prototype  } = req.query();  let data = {    code: 0,    message: 'ddd'  };  res.send('${callback}(${JSON.stringify(data)})');});

问题：JSONP只能处理get请求

2、后台配置解决跨域

后台通过配置解决跨域问题

首先在pom.xml中引入依赖

<!--跨域依赖--><dependency>    <groupId>com.thetransactioncompany</groupId>    <artifactId>cors-filter</artifactId>    <version>1.7.1</version></dependency><dependency>    <groupId>com.thetransactioncompany</groupId>    <artifactId>java-property-utils</artifactId>    <version>1.9</version></dependency><dependency>

然后在web.xml配置过滤器

<!--为了允许跨域访问--><filter>    <filter-name>CorsFilter</filter-name>    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class></filter><filter-mapping>    <filter-name>CorsFilter</filter-name>    <url-pattern>/*</url-pattern></filter-mapping>

这样前端就可以尽情跨域请求数据了，是不是很方便？

注意如果项目中配置了检测是否登录过滤器，可能会起冲突，因为没有登录的话每次都会跳转到登录接口。。。

SpringBoot注入重写方法的WebMvcConfigurer解决跨域问题

CORSConfig.java

/** * @Description 跨域配置 * @Author chenlinghong * @Date 2019/1/27 13:31 **/@Configurationpublic class CORSConfig {    @Bean    public WebMvcConfigurer corsConfigurer(){        return new WebMvcConfigurer() {            @Override            public void addCorsMappings(CorsRegistry registry) {                registry.addMapping("/**")                        .allowedHeaders("*")                        .allowedMethods("*")                        .allowedOrigins("*");            }        };    }}

3、基于iframe的跨域解决方案（window.name/document.domain/location.hash）

4、通过HTML5中新引进的window.postMessage方法来跨域传送数据

5、通过CORS解决跨域

CORS也需要服务器端的支持

CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否.

首先自己写一个过滤器CORSFilter

/** * Created by 12143 on 2018/12/7. */@Componentpublic class CORSFilter extends OncePerRequestFilter {    @Override    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {        response.addHeader("Access-Control-Allow-Origin", "http://192.168.100.150:8020");        //response.addHeader("Access-Control-Allow-Origin", "*");        response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");        response.addHeader("Access-Control-Allow-Headers", "Content-Type");        response.addHeader("Access-Control-Max-Age", "1800");//30 min        filterChain.doFilter(request, response);    }}

注意：Access-Control-Allow-Origin为*则允许所有url访问，如果为“http://192.168.100.150:8020”则只有此url才能访问，注意有端口的要把端口也写上
比如配置了http://192.168.56.130:8081，那么只有http://192.168.56.130:8081 能拿到数据，否则全部报403异常
然后在web.xml中添加此过滤器

<filter>    <filter-name>CorsFilter</filter-name>    <filter-class>com.xxx.common.filter.CORSFilter</filter-class></filter><filter-mapping>    <filter-name>CorsFilter</filter-name>    <url-pattern>/*</url-pattern></filter-mapping>

6、通过Nginx反向代理

Axios

longHARDEN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS、AJAX、jQuery学习笔记
Cscprx的博客
01-21 126
JavaScrip 声明变量 var temp; temp =1; 是一个弱类型语言，没有类型 声明对象 var obj = { // 这里用，来表示属性 lastName : "zhangsan", age : 18 }; alert(obj.lastName) obj.email = "aaaa@qq.com"; //如果这里没有事先写这个属性，那么这样直接添加就可以 声明...
jQuery学习笔记
尚硅谷铁杆粉丝的博客
10-29 88
复制节点 clone()不复制行为 clone(true)连同绑定的事件一同复制 $("#bj").click(function(){ alert($(this).text()); }).clone(true).appendTo("#game"); 替换节点 replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素 $("#bj").replaceW...
学习jQuery中的Ajax——$.get()方法
03-17
NULL 博文链接：https://xa-zbl.iteye.com/blog/552797
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记一
01-21
AJAX简单介绍： AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一种创建交互式网页应用的网页开发技术。通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 jQuery是一种javascript框架，是对javascript的一种轻量级的封装，容易理解。 Ajax是一种由xml+javascript组合起来的一种异步请求技术.可实现动态刷新。 ajax准备
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
jquery中ajax学习笔记4
10-28
本节主要介绍两点：1.缓存问题 2.中文问题
jquery ajax笔记
qq_43494108的博客
08-11 285
今天我们了解的是ajax分为两个部分：1.Ajax是什么 2.Ajax的语法 1.Ajax是什么 1.AJAX 是一种用于创建动态网页的技术 2.通过与后台服务器进行数据交换的时候，ajax可以使网页实现异步更新，这也就可以让不要网页重新加载的情况下只针对网页的一部分来进行刷新。 3.没有使用ajax的网页在每一次数据进行更新的时候都要重新加载整个网页。 像我们平时用的淘宝网站里面搜索到一种商品时...
jQuery 中的 Ajax学习笔记
weixin_39202130的博客
12-17 148
jQuery 中的 Ajax $.ajax() $.ajax()方法概述 作用：发送Ajax请求。 $.ajax({ type: 'get', url: 'http://www.example.com', data: { name: 'zhangsan', age: '20' }, contentType: 'application/x-www-form-urlencoded', beforeSend: function () { ...
jquery、ajax学习电子书.zip
07-25
ajax、jquery这个是实际开发中使用最多的脚本，js在兼容性上有待提高，学会这些电子书，那么已经可以算是初步入门，可以进行实际开发了。
AJAX与jQuery中的Ajax学习总结（一）
yijun_zeng的博客
03-24 1287
一个HTTP请求由4个部分组成：服务器返回的HTTP响应包含3部分：1，HTTP请求方法或动作（verb）2，正在请求的URL3，一个可选的请求头集合，其中可能包括身份验证信息4，一个可选的请求主体1，一个数字和文字组成的状态码，用来显示请求的成功和失败。2，一个响应头集合3，响应主体HTTP请求的各部分有指定的顺序，请求方法和URL首先到达，然后是请求头，最后是请求主体。请求HTTP1.第一件事...
jquery，ajax笔记,jQuery中的Ajax-学习笔记
weixin_39796878的博客
08-06 265
$.ajax()一、$.ajax()方法概述作用一 ：发送Ajax请求。$.ajax({type: 'get',url: 'http://www.example.com',data: { name: 'zhangsan', age: '20' },contentType: 'application/x-www-form-urlencoded',beforeSend: function () {re...
jquery  基础
wahaha
09-17 107
2.选择器 3. DOM操作 1.内容操作 2. 属性操作 2. 对class属性操作 3. CRUD操作: 1.jquery 入口函数 $(function () { }); 页面加载完成才执行的里面的内容 可以有多个 window.onload 只能有一个 2.选择器 ...
jquery，ajax笔记,ajax|jquery笔记
weixin_39608132的博客
08-06 359
1.index.PHP$(document).ready(function(){$('#submitbt').click(function(){//var name = $('#name').val();//var dataString = "name="+name;var dataPass = {'name': $("#name").val()};$.ajax({type: "POST",url...
Ajax详细笔记
m0_61533408的博客
04-11 634
1. Ajax概述 1.1 AJAX 简介 AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式 1.2 XML 简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签， 全都是自定义标签，
jQuery学习笔记之Ajax用法详解
weixin_30344131的博客
11-16 108
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求、载入、处理、传递等,需要的朋友可以参考下 本文实例讲述了jQuery学习笔记之Ajax用法。分享给大家供大家参考，具体如下： 原文链接：https://yq.aliyun.com/ziliao/153370 一、Ajax请求 　　1、jQuery.a...
AJAX的三种实现方式以及JS的原生实现方式
qq_35417353的博客
06-27 332
AJAX的基本使用AJAX的基本认识什么是AJAX原生js实现AJAXJQuery的GET方式实现AJAXjQuery 的 POST 方式实现 AJAXjQuery 的通用方式实现 AJAX(重要)AJAX 小结 AJAX的基本认识 什么是AJAX AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览
jQuery学习记录--ajax
qq_44091183的博客
01-27 109
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、原生JavaScript中的Ajax1.创建Ajax对象:2.连接到服务器3.发送请求4.接收返回值二、jQuery中的Ajax1.$.ajax() 方法2.$.get() 方法3.$.post() 方法 前言 使用ajax可以实现网页局部刷新，接下来我将介绍原生JavaScript与jQuery中的ajax使用方法。 一、原生JavaScript中的Ajax 原生创建Ajax的步骤： 1.创建Ajax对象: //老版本
js/plugin/jquery_ajax_document.js
最新发布
08-26
js/plugin/jquery_ajax_document.js是一个使用jQuery库的插件，用于处理Ajax请求和处理文档对象的操作。 该插件提供了一些方法来发送Ajax请求，可以将请求发送到服务器并获取响应数据。通过使用这些方法，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值