• 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>
    
  • 相关阅读:
    hdu1874 畅通project续 最短路 floyd或dijkstra或spfa
    基于Linux环境Tomcat-MySQL的server搭建
    C++中 pair 的使用方法
    UI 经常用法总结之--- UIWindow UIView (不断更新中)
    LeetCode题解 || Longest Substring Without Repeating Characters (O(n)算法)问题
    HDU 1874 畅通project续 (最短路径)
    android studio 导入第三方库的记录
    android创建桌面快捷键shortcut
    Eclipse:Cannot complete the install because of a conflicting dependency.问题解决
    js保留两位小数的解决的方法
  • 原文地址:https://www.cnblogs.com/chanyuli/p/11761391.html
Copyright © 2020-2023  润新知