ajax语法结构

Posted chanyuli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax语法结构相关的知识,希望对你有一定的参考价值。

ajax语法结构

特点:

ajax(******)
   异步提交
       同步异步:描述的任务的提交方式
           同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
           异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制
                
            阻塞非阻塞:程序的运行状态
                程序运行的三状态图
                
                
   局部刷新
       一个页面 不是整体刷新 而是页面的某个地方局部刷新
        

Ajax是一门js的技术 基于原生js开发的,但是用原生的js写代码过于繁琐
我们在学的时候 只学如何用jQuery实现ajax

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

直接用一个栗子来讲明ajax的语法结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">计算</button>
</p>
<script>
    $('#b1').on('click',function () {
        $.ajax({
             // 1.到底朝后端哪个地址发数据
            url:'', // 专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交
            // 2.到底发送什么请求
            type:'post', // 专门制定ajax发送的请求方式
            
            // 3.发送的数据到底是什么
            data:{'t1':$('#t1').val(),'t2':$('#t2').val()},
            
            // 4.异步提交的任务 需要通过回调函数来处理
            success:function (data) {// data形参指代的就是异步提交的返回结果
                    // 通过DOM操作将内容 渲染到标签内容上
                $('#t3').val(data)
                {#alert(data)#}
            }
        })
    })
</script>
</body>
</html>

以上是关于ajax语法结构的主要内容,如果未能解决你的问题,请参考以下文章

Jquery中ajax基本语法

AJAX相关JS代码片段和部分浏览器模型

在下面的代码片段中的剩余 ='passthrough' 处的代码中出现语法错误

Javascript代码片段在drupal中不起作用

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构