前后端交互——Ajax

这篇具有很好参考价值的文章主要介绍了前后端交互——Ajax。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax

Ajax 即“AsynchronousJavascriptAndXML”(异步 JavaScript 和 XML),是指一种创建交互式应用的网页开发技术。通俗的理解就是在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。
前后端交互——Ajax

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。其缺点如下:
1. 本身是针对MVC编程,不符合前端MVVM的浪潮
2. 基于原生XHR开发,XHR本身的架构不清晰
3. 不符合关注分离(Separation of Concerns)的原则
4. 配置和调用方式非常混乱,而且基于事件的异步模型不友好。

Ajax典型的应用场景

  1. 用户名检测:注册用户时,通过Ajax的方式动态检测用户名是否被占用
  2. 搜索提示,输入关键字,动态加载数据搜索提示列表
  3. 数据分页显示
  4. 数据的增删改查

jQuery中的ajax

$.get()

用来发起get请求,从而将服务器上的资源请求到客户端进行使用
前后端交互——Ajax

$.post()

用来发起post请求,向服务器提交数据
前后端交互——Ajax文章来源地址https://www.toymoban.com/news/detail-409509.html

	<button id="btnGET">不带参数的请求</button>
    <button id="btnGET1">带参数的请求</button>
    <button id="btnPOST">提交数据</button>
    <script>
        $(function() {
     
        //通过get发出不带参数的请求
            $('#btnGET').on('click', function() {
     
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
     
                    console.log(res);
                })
            })
            $('#btnGET1').on('click', function() {
     
            //通过get发出带参数的请求
                $.get('http://www.liulongbin.top:3006/api/getbooks', {
     
                    id: 1
                }, function(res) {
     
                    console.log(res);
                })
            })
            $('#btnPOST').on('click', function() {
     
            //通过POST提交数据
                $.post('http://www.liulongbin.top:3006/api/addbook', {
     
                    bookname: '背影',
                    author: '朱自清',
                    publisher: '天津图书出版社'
                }, function(res

到了这里,关于前后端交互——Ajax的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 通过ajax异步交互实现echarts绘图

    目录 前言 1.引入库 2.flask链接MYSQL读取数据 3.HTML页面echarts绘图 4.结果实现 总结: ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 ECharts 遵循 Apache-2.0 开源协议,免费商用。 ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等

    2023年04月14日
    浏览(59)
  • JavaWeb中异步交互的关键——Ajax

    AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML , JavaScript 表明该技术和前端相关; XML 是指以此进行数据交换。 AJAX 作用有以下两方面: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器

    2024年02月03日
    浏览(45)
  • django Ajax--前后端数据交互

    Django的Ajax和JavaScript的Ajax实质上是指同一种技术,即异步JavaScript和XML(Asynchronous JavaScript and XML)。它允许在不刷新整个页面的情况下,通过前后端之间的异步交互来获取或发送数据。 区别在于角色和层次: Django的Ajax: Django的Ajax通常是指在Django框架中使用Ajax技术的方式。

    2024年02月14日
    浏览(50)
  • 探索异步交互:JavaScript AJAX 的全面指南

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-AjAx 目录 AJAX AJAX 的优势 AJAX 的使用 创建一个 ajax 对象 配置链接信息 发送请求 一个基本的 ajax 请求 ajax 状态码 readyStateChange resp

    2024年02月03日
    浏览(52)
  • 使用ajax进行前后端交互的方法

    使用ajax进行前后端交互的方法:(我只测试通了json对象作为参数的方式,其他方式我没有测试通过) 1、前端方法: 传参方式:POST 请求类型:json对象 响应类型:json对象 2、后端方法:无需创建一个类来接收前端传来的json字符串,需要注意是:使用的接收参数必须与前端定

    2024年02月14日
    浏览(48)
  • (前后端交互式)Ajax上传图片 + 更换背景图片

    上传-图片 注意1:上传的图片必须在2MB以内 注意2:服务器端oss(阿里云对象存储)为了安全性,图片url网址不能直接在浏览器地址栏访问 请用img/背景图方式进行使用 上传图片的代码实现 * 1. 获取图片文件 * 2. 使用 FormData 携带图片文件 * 3. 提交到服务器,获取图片url网址使

    2024年02月14日
    浏览(47)
  • [前端系列第6弹]Ajax简明教程:轻松实现Web页面的异步交互

    在这篇文章中,我将介绍Ajax的基本概念、原理、优缺点、实现方法和应用场景,以及如何使用它来实现Web页面的异步交互。还将给一些简单而实用的例子,让你可以跟着我一步一步地编写自己的Ajax代码。 目录 一、什么是Ajax 二、如何使用Ajax (一)JavaScript中使用Ajax (二)

    2024年02月13日
    浏览(45)
  • ajax中的和后端交互的put、patch、delete请求

    1、向后端发送一个put请求,请求修改数据: 重点:修改谁、修改成什么: 修改谁:修改user下第一个: user内容: 修改成什么:修改成“username=hhhpassword=575” 完整代码:(只复制了body里面的代码)  结果: json原来的内容: json文件内容的变化: user内容变化:   2、向后端

    2024年02月06日
    浏览(71)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(71)
  • 【b站咸虾米】jQuery的ajax异步操作 web前端后端分离技术的原理

    课程地址:【jQuery的ajax异步操作 web前端后端分离技术的原理】 https://www.bilibili.com/video/BV1u5411M7ny/?share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 通过案例学习ajax异步操作。 介绍 php,前后端不分离的技术。 ajax,实现前后端分离技术。 在之前,要做动态网站,要懂php,ja

    2024年04月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包