Ajax与jQuery

目录


Ajax是一种异步无刷新的技术

Ajax的优点:

  1. 可以无需刷新页面与服务器端进行通信
  2. 允许根据用户事件来更新部分页面内容

Ajax的缺点:

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(同源)
  3. SEO(搜索引擎优化)不友好

jquery 调用 ajax 方法:

$.ajax

格式:

$.ajax({ [参数] });

格式: $.ajax(});参数:

type: 请求方式GET/POST

url: 请求地址url

async: 是否异步,默认是true表示异步

data: 发送到服务器的数据

dataType: 预期服务器返回的数据类型

contentType: 设置请求头

success: 请求成功时调用此函数

error: 请求失败时调用此函数

$.get

这是一个简单的GET 请求功能以取代复杂 $ajax

请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

语法:

// 1.请求json文件,忽略返回值
$.get( 'js/cuisine_area.json' );
// 2.请求json文件,传递参数,忽略返回值

$.get( 'js/cuisine_area.json',{ name:"tom" ,age:100} );
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值

$.get( 'js/cuisine_area.json',function( data ) {

console.log(data)

});
// 4.请求json文件,传递参数,拿到返回值

$.get('js/cuisine_area.json' , { name:"tom",age:100},function(data){

console.log(data) ;
});

$.post

$.getJSON

表示请求返回的数据类型是]SON格式的ajax请求

$.getJSON('js/cuisine_area.json' , { name:"tom",age:100},function(data){

console.log(data) ; //要求返回的数据类型时JSON格式
});

相关推荐
冰万森4 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr17 分钟前
Ajax 技术详解
前端
浩男孩26 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学30 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空40 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端
星秀日1 小时前
JavaWeb--Ajax
前端·javascript·ajax