ajax的相关介绍以及使用

本是古典何须时尚 2022-04-13 08:12 189阅读 0赞

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

它可以通过在后台与服务器先进行少量数据交换，使网页实现异步更新。这就代表可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如果不使用ajax,进行Form的提交，当用户点击“Submit”按钮后，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果由于网络太慢或者其他原因，就会得到一个404页面。这也是Web进行运作的原理：一次HTTP请求对应一个页面。

如果想让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。这就使用到了Ajax技术。

下面以用户登录页面为例使用Ajax请求

<script>
    	$(function(){
    		//点击登录按钮
    		$('#form').find('.form_group').on('click','.btn',function
    {
    var username = $('.username'.val();
    var password = $('.password').val();
    console.log($('.username').val());
    console.log($('.password').val());
    $.ajax({
    type:'POST',
    url:'/admin/login_data',
    dataType:'json',
    data:{
    username:username,
    password:password
    },
    sucess:function(res){
    if (res.code ===-1){
    console.log(res.msg);
    alert(res.msg);
    }else if (res.code === 1){
    window.location.href = 'admin/index'
    }
    }
    });
            
    });
    		});
    $(document).ready(function(){
    $("get_token").on('click',function(){
    var account = $('#username').prop('value');
    $.ajax({
    'url':'http://yaqin.linkeddb.com/admin_send_token',
    'data':{'account':account},
    sucess:function(item){
    if (item.status === 'ok'){
        alert(item.message + 'ok')
            }
    else{
    alert(item.message + 'no')
            }
        }
      })
    })
    })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点

引言 > 前端的发展可以说是一个快速崛起的历程了，不断的进化，不断的出现新的Api，新的功能，前端这个领域真的是一个发展飞快的领域，你前一天刚学会XXX的的运用，后一...

╰半橙微兮°/ 2024年04月17日 05:34/ 0 赞/ 5 阅读

相关 HTTP协议的介绍以及相关概念

> 简单的介绍了HTTP协议的相关概念。文章目录 1 HTTP不保存状态 2 Cookie状态管理 3 请求URI 4 长连接和短连接

妖狐艹你老母/ 2023年01月03日 01:20/ 0 赞/ 108 阅读

相关前端ajax的使用以及接口的使用

https://www.cnblogs.com/suoning/p/5809106.html https://www.cnblogs.com/7z7chn/ https:/

ゞ浴缸里的玫瑰/ 2022年09月12日 11:54/ 0 赞/ 270 阅读

相关 AJAX的相关使用方法

基本选择器 $(”myDiv”) 匹配唯一的具有此id值的元素 $(”div”) 匹配指定名称的所有元素 $(”.myClass”) 匹配具有此

淩亂°似流年/ 2022年08月27日 10:43/ 0 赞/ 115 阅读

相关 Ajax使用介绍

1、AJAX(Asynchronous Javascript And XML)\--（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。即：AJAX

浅浅的花香味﹌/ 2022年07月26日 04:25/ 0 赞/ 126 阅读

相关 AJAX请求的相关介绍以及使用

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能

桃扇骨/ 2022年05月21日 00:45/ 0 赞/ 147 阅读

相关 SpringDataRedis介绍以及相关用法

1. SpringDataRedis简介 1.1项目常见问题思考我们目前的系统已经实现了广告后台管理和广告前台展示，但是对于首页每天有大量的人访问，对数据库造成

超、凢脫俗/ 2022年05月18日 10:55/ 0 赞/ 159 阅读

相关 python 中的time、calendar、datetime模块的相关介绍以及使用

随意转换日期形式在实际开发中也是一种不可或缺的能力，所以在这里我想要介绍下和日期有关的模块介绍。一、time模块引入time模块 import ti

忘是亡心i/ 2022年04月16日 06:08/ 0 赞/ 196 阅读

相关 ajax的相关介绍以及使用

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它可以通过在后台与服务器先进行少量数据交换，使网页实现异步更新。这就代表可以在不重新加载整个网页的情

本是古典何须时尚/ 2022年04月13日 08:12/ 0 赞/ 190 阅读

相关 Vuex的介绍以及使用

一，什么是Vuex？ vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题

你的名字/ 2021年07月26日 15:45/ 0 赞/ 423 阅读