JQ中使用Ajax

184 阅读1分钟
  • HTTP `

设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法 一次HTTP操作称为一个事务,其工作过程可分为四步 --> <!-- OPTIONS 返回服务器针对特定资源所支持的HTTP请求方法 HEAD 向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回 GET 向特定的资源发出请求 一般用户请求数据会被经常使用 POST 向指定资源提交数据进行处理请求 一般用于登录 数据保密 还可以用与文件传输 PUT 向指定资源位置上传其最新内容 需要修改数据的时候和更新数据的时候 DELETE 请求服务器删除Request-URI所标识的资源 删除数据的时候使用
TRACE 回显服务器收到的请求,主要用于测试或诊断
CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器 HTTP/1.1 例如:http:// HTTP/2 例如:https:// 加密 www.baidu.com/ PATCH 实体中包含一个表,表中说明与该URI所表示的原内容的区别。

  • GET(SELECT):从服务器取出资源(一项或多项)。
  • POST(CREATE):在服务器新建一个资源。
  • PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。
  • PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。
  • DELETE(DELETE):从服务器删除资源。
  • HEAD:获取资源的元数据。
  • OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。
  • JQ中的AJAX
<script src="./jquery-1.12.4.js"></script>
<script>
    $('button').click(function(){
        // $.ajax({
        //     /* 异步 默认为true  */
        //     /* false表示同步 改同步渲染页面会出现白屏现象*/
        //     async:true,
        //     /* 是否设置浏览器的缓存功能 true 设置缓存
        //     false不设置缓存 每次请求都是新的请求 */
        //     cache:true,
        //     /* 请求的接口 */
        //     // url:"http://timemeetyou.com:8889/api/private/v1/login",
        //     url:"./123.txt",
        //     /* 请求的方式 post有加密功能 */
        //     // method:"post",
        //     method:"get",
        //     /* 发送到服务器的数据 */
        //     // data:{
        //     //     username:'admin',
        //     //     password:'123456'
        //     // },
        //     /* 预期服务器返回的数据类型 json jsonp*/
        //     dataType:'json',
        //     /* 在一个 jsonp 请求中重写回调函数的名字 */
        //     /* 这里fn需要和后台的代码对应 */
        //     jsonp:"fn",
        //     /* 为 jsonp 请求指定一个回调函数名 */
        //     /*  callbackFn 是前端配置的 */
        //     jsonpCallback:"callbackFn",
        //     /* 请求成功之后 执行的回调函数 */
        //     // success:function(res){
        //     //     /* success后面的方法里面的形参res表示后台返回的数据 */
        //     //     console.log( res );
        //     // },
        //     /* 请求失败时调用此函数 */
        //     error:function(err){
        //         console.log(err)
        //     }
        // })
       
    })
    // function callbackFn(res){
    //     console.log(res)
    // }
    参数	类型	描述options	Object	可选,AJAX 请求设置,所有选项都是可选的async	Boolean	默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 falsecache	Boolean	默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面data	String	发送到服务器的数据dataTyString	预期服务器返回的数据类型error	Function	请求失败时调用此函数

success Function 请求成功后的回调函数jsonp String 在一个 jsonp 请求中重写回调函数的名字jsonpCallback String 为 jsonp 请求指定一个回调函数名

  • $.POST
<button>登录</button>
<script src="./jquery-1.12.4.js"></script>
<script>
    $('button').click(function () {
        // $.ajax({
        //     url: "http://timemeetyou.com:8889/api/private/v1/login",
        //     method: "post",
        //     data: {
        //         username: 'admin',
        //         password: '123456'
        //     },
        //     dataType: 'json',
        //     success: function (res) {
        //         console.log(res);
        //     },
        // })
        let url = "http://timemeetyou.com:8889/api/private/v1/login";
        /* $.post有三个参数 第一参数表示接口地址 第二个参数表示传输的数据 
        第三个参数表示成功后的回调函数 */
        $.post(url,{username:'admin',password:'123456'},function(res){
            console.log(res);
        })

    })

</script>