当前位置：首页>前端>正文

jquery 如何接收post参数 jquery怎么发送请求

前端2024-04-24 19:31:56

jq之ajax
使用jq发起一个简单的get请求
使用jq发起一个简单的post请求
发起一个简单的load请求
. g e t , .get,.get,post和$().load()的区别
发起一个$.ajax请求
$.ajax发起一个jsonp请求
$ajax发起一个请求，实现类似懒加载的那种效果
jq之中处理回调函数的deferred对象 --- 延迟对象！
延迟对象方法的介绍
延迟对象的创建
jq的多库共存

深浅克隆

jq之ajax

发送http请求分为两种：

xhr 请求;
jsonp 请求;

使用jq发起一个简单的get请求

01：$.get(url,[data],[callback],[type]) — 这是发起一个http请求（以get的方式）

参数1：url:待载入页面的URL地址，；参数2：data:待发送 Key/value 参数。对象的形式！
参数3：callback:载入成功时回调函数。参数4：type:返回内容格式：json,text,html,xml,script,_default
注意点：url为必须传递的参数，其他的都是可选参数！

<?php 
  echo "你好";
?>

//需求：发起一个简单的get请求
      $.get(
        "./php/01get.php", {
          key: "value"
        },
        function (data) {
          console.log(data); //这是发起请求后，得到的响应结果 => 你好
        }
      )

使用jq发起一个简单的post请求

01：$.post(url,[data],[callback],[type]) — 这是发起一个http请求（以get的方式）

参数1：url:待载入页面的URL地址，；参数2：data:待发送 Key/value 参数。对象的形式！
参数3：callback:载入成功时回调函数。参数4：type:返回内容格式：json,text,html,xml,script,_default
注意点：url为必须传递的参数，其他的都是可选参数！

<?php 

  echo '{"username":"pink","password":"123456"}';
?>

$(function () {
      //需求：发起一个简单的post请求
      $.get(
        "./php/02post.php", {
          username: "pink",
          password: "123456" //实际上，这边应该是变量的方式，后端返回的也是从前端发送过去的变量值！
        },
        function (data) {
          console.log(data); //这是发起请求后，得到的响应结果 => 你好
        },
        "json" //返回的是json格式处理后的对象！
        // "text" //返回的是text格式  {"username":"pink","password":"123456"}
      )

    })

重要 : 当你使用jQuery，请求数据并回来转换，没有效果出现，那么说明报错了，只不过jQuery 帮你把错误截获了。

所以 $jquery 如何接收post参数 jquery怎么发送请求,jquery 如何接收post参数 jquery怎么发送请求_php,第1张$ .post不存在报错信息回馈！而$.ajax是存在的！
截获原理 : jQuery怎么截获报错那 ? try catch ;

发起一个简单的load请求

load(url, [data], [callback])

一般情况下 ajax 都是去请求接口的; 获取json数据; 在极个别情况下我们需要用ajax加载html字符串;

作用：就是请求html文件，插入到DOM之中！

参数1： url: 待载入页面的URL地址，；参数2： data: 待发送 Key / value 参数。对象的形式！
参数3： callback: 载入成功时回调函数。
注意点： url为必须传递的参数，其他的都是可选参数！

<h1>我是我是我是</h1>

<div class="container">

  </div>
    $(function () {
      //需求：发起一个简单的load请求
      $(".container").load("./php/03load.html")
      //结果：就是在 这个容器中 请求到路径中的html文件，擦好人到这里面！
    })

$jquery 如何接收post参数 jquery怎么发送请求,jquery 如何接收post参数 jquery怎么发送请求_json_02,第2张$ post和$().load()的区别

$.get  => 全局方法   ; => 局部方法;
// 纯工具 ;            都是为了操作jQuery实例里面的DOM对象而生的方法;

// 都是绑定在jQuery的构造函数上的;
//                     都是绑定在原型对象上的;

发起一个$.ajax请求

$(function () {
      //$ajax(opt)
      //参数：里面是一个对象 
      //opt对象里面的参数：常常用到的有url type data(参数的数据) success(请求成功) complete（请求完成）
      //  error(请求失败) statusCode(状态码处理异常情况)
      //注意点：success(callback) callback的参数为：data, textStatus, jqXHR

      $.ajax({
        //请求路径
        url: "./php/04ajax.php",
        //请求数据
        data: {
          a: 10
        },
        //请求success的回调函数
        success: function (xhr, res, state) {
          console.log("成功", res, arguments);
        },
        //请求完成的回调函数
        complete: function (xhr, state) {
          console.log("完成:complete", arguments);
        },
        //请求失败的回调函数
        error: function (xhr, error, errmsg) {
          console.log("失败", errmsg);
        },
        //根据状态码处理异常情况
        statusCode: {
          404: function () {
            console.log("找不到，你的页面");
          },
          500: function () {
            console.log("找不到，服务器有问题");
          },
          403: function () {
            console.log("找不到，服务器拒绝访问");
          }
        }
      })

      //注意点：就是我们每一次发送ajax请求的时候，对于错误的信息处理是不会变的，异常可以提取出来！
      //可以使用$.ajaxSetup() 里面的一个对象{}
      $.ajaxSetup({
        error: function (xhr, res, errmsg) {
          console.log("抱歉请求发送失败");
        },
        statusCode: {
          404: function () {
            console.log("找不到，你的页面");
          },
          500: function () {
            console.log("抱歉，服务器有问题");
          },
          403: function () {
            console.log("抱歉，服务器拒绝访问");
          }
        }
      })

      //发送多个ajax请求
      // $.ajax({
      //   url: "./php/04ajax.php",
      //   success: function (xhr, res, state) {
      //     console.log("成功", res, arguments);
      //   }
      // })
      // $.ajax({
      //   url: "./php/04ajax.php"
      // })

      //全局事件
      $(document).ajaxStart(function () {
        console.log("请求成功开始");
      })

      $(document).ajaxComplete(function () {
        console.log("请求完成，接受到相应");
      })

      //如果需要去掉全局事件，那么设置global设置为false！
      $.ajax({
        url: "./php/04ajax.php",
        global: false
      })

    })

$.ajax发起一个jsonp请求

需求:点击换一换，使用换一换功能！

<div class="recommend-con">
    <div class="recommend-con-title clear_fix">
      <div class="recommend-con-title-l">
        推荐课程
      </div>
      <div class="recommend-con-title-r change" id="changeBtn">换一换</div>
    </div>
    <div class="recommend-con-box clear_fix">
      <!-- 每一项 -->
      <!-- <div class="recommend-con-item">
        <div class="recomemnd-img">
          <a target="_blank" title="教你画卡通IP"
            href="https://www.gogoup.com/course/GMzcw?utm_source=zcool&utm_medium=product&utm_campaign=homepage_course&utm_content=370&utm_term=lb">
            <img src="https://image.gogoup.com/course/20200528/1590660588045.png" alt=""></a>
        </div>
        <div class="recommend-info">
          <a href="">
            教你画卡通IP
          </a>
        </div>
      </div> 
    </div>
  </div>

注意点：发起jsonp请求的时候：

还有data中的 jsonpcallback: “callback”,
需要设置返回的数据类型：dataType: “jsonp”,
更需要设置jsonp的回调函数：jsonp: “jsonpcallback”,
使用请求回来的结果：
要么在 success: function (res) {}
$.ajax({}).then(callback)

$(function () {
      //需求：
      //01：点击换一换，使用jq的方式，发起一个jsonp的请求 
      //02：渲染到页面之中！        
      var pageNo = 2;
      var formId = 379;
      render()

      function render() {
        $.ajax({
          //"jsonp": JSONP 格式。
          // 使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
          dataType: "jsonp",
          url: " https://api.gogoup.com/p1/data/recommend",
          data: {
            type: 0,
            pageNo: pageNo,
            pageSize: 5,
            fromId: formId,
            jsonpcallback: "callback",
            _: Date.now()
          },
          //在这边修饰的时候，可以在后端随意修改那个callback名！
          jsonp: "jsonpcallback",
          success: function (res) {
            // console.log(res);
            var data = res.datas //数据
            //遍历数据
            var html = "";
            html = data.map(function (item, i) {
              return `
              <div class="recommend-con-item">
                <div class="recomemnd-img">
                  <a target="_blank" title="${item.name}" href="${item.url}" alt="">
                  <img src="${item.image}" alt="">
                  </a>
                    
                </div>
                <div class="recommend-info">
                  <a href="">
                    ${item.name}
                  </a>
                </div>
              </div> 
              `
            }).join("");
            //把html插入到容器之中！
            function render0() {
              $(".recommend-con-box").html(html);
            }
            render0()
            pageNo++;
            formId = data[data.length - 1].courseId
          }
        })
      }

      //点击的时候，调用渲染函数！
      $("#changeBtn").on("click", function () {
        render()
      })
    })

$ajax发起一个请求，实现类似懒加载的那种效果

<p>
    <label for="">账号</label><input value="root" type="text">
  </p>
  <p>
    <label for="">账号</label><input value="123456" type="text">
  </p>
  <p>
    <input type="button" id="btn" value="登录">
  </p>

  <div class="mask">
    <h1>在加载之中，请稍等！</h1>
    <img src="./" alt="">
  </div>

   $(function () {
      //需求：
      // 01：点击表单中的登录按钮的时候，在请求数据的时候，
      // 02：若是请求数据时间较为长，那么现实一个遮挡层和一个加载的小圆圈 （懒加载效果）

      $("#btn").on("click", function () {
        //1：请求开始的时候， 需要显示那个遮挡层和那个懒加载的小圆圈
        $(document).ajaxStart(function () {
          $(".mask").show();
        })

        //2：请求结束后，需要隐藏那个遮挡层和小圆圈
        $(document).ajaxSuccess(function () {
          $(".mask").hide();
        })

        //3：点击登录的时候，发起一个ajax请求
        $.ajax({
          url: "./php/05$ajax_text.php",
        })
      })

    })

<?php
      $arr = array();
      for($i = 0 ; $i < 1000000 ; $i ++){
            array_push( $arr , $i * (5 + time()) );
      }
      echo json_encode($arr);
?>

jq之中处理回调函数的deferred对象 — 延迟对象！

deferred — 延迟对象 — 来源于：所有的ajax的API $.post , $.get , $.ajax 返回值
作用：可以解决回调函数的问题，使得编程偏向同步代码结构！
def对象中的方法：

00: def.then() — 成功回调函数或者失败回调函数
01：def.done() — 成功的回调函数
02：def.fail() — 失败的回调函数
03: def.always() — 无论如何都会执行的方法

延迟对象方法的介绍

$(function () {
      //所有的ajax的API $.post , $.get , $.ajax 返回值都是 deferred（推迟---对象 (类似promise对象)
      //因此有着 then( 成功回调函数,失败回调函数)，done(成功回调函数),fail(失败回调函数),always(无论如何都会调用) 等方法！
      var def = $.ajax({
        url: "./php/06hello.php",
        success: function (res) {
          console.log(res); //你好
        }
      })

      //打印def对象
      console.log(def);

      //def对象中的then方法 --- 成功回调函数或者失败回调函数
      def.then(function (res) {
        console.log(res); //你好
      })

      //def对象中的fail方法 --- 失败的回调函数 
      def.fail(function (res) {
        console.log(res); //无 因为成功！
      })

      //def对象中的always方法 --- 无论什么都会执行
      def.always(function (res) {
        console.log(res);
      })
    })

延迟对象的创建

//注意点：就是def对象，可以给外部修改状态，延迟需要使用一个函数包裹一下使用
      // def 处理函数;
      function defFactory() {
        var def = $.Deferred();
        setTimeout(function () {
          console.log(1);
          def.resolve();
        }, 3000)
        // 隐藏改变状态的工具 resolve 和 reject , 让外部无法访问这个api，让外部无法改变deferred对象的状态;
        return def.promise();
      }

      var def_ins = defFactory()
      def_ins.done(function () {
        alert("状态改变");
      })

jq的多库共存

所谓的多库共存就是：

01：$和jQuery的命名起了冲突问题！
02：由于jQuery的更新速度过快,所以插件更不上,导致不同版本的jQuery对插件支持的不一样,而刚好我们此时需要用一个高版本的jQuery进行开发,我们用的z-tree则是低版本的jQuery,所以在这种场景下,则会产生$和jQuery命名空间冲突的问题

解决方案：

01：通过jQuery自带的noConflict函数将 $jquery 如何接收post参数 jquery怎么发送请求,jquery 如何接收post参数 jquery怎么发送请求_json_03,第3张$ 和jQuery对象的js类库
02：就是把后导入的jq库中的$或jQuery的这个符号的使用权释放出来，给前面的jq库使用即可！

$(function () {
      //因此在同时存在 1.6.4 和  3.5.1 的jq库版本的时候，这边会报错，因为jq库是向上兼容的！
      //假如先引入 1.6.4版本的jq库 在引入3.5.1的版本库 
      console.log($.fn.jquery); //打印的是3.5.1版本
      var $j = $; //可以给$起一个别名！
      $(".box").on("click", function () {
        console.log(111);
      });
      $.noConflict(); //释放$的使用权 释放了3.5.1的$使用权 交给了1.6.4的版本jq库 --- 
      // 因此3.51版本的就是需要使用jquery 否则使用$会报错！
      jQuery(".box").on("click", function () {
        console.log(222);
      })
      console.log($.fn.jquery); //打印的是1.6.4版本
      console.log($(".box").size()); //4 --- jq在1.6.4会size可以使用 拿到高本版就是不行了
      // console.log(jquery(".box").size()); //4 --- jq在1.6.4会size可以使用 拿到高本版就是不行了 报错！
    })

深浅克隆

存储机制

01：栈 — 队列方式，先进后出
02：堆 — 映射关系，栈里面存储复杂对象的值（而复杂对象的地址存储在栈之中，最后指向堆！）

深浅克隆

浅克隆： — 就是对象长得一样，地址也是一样
深克隆： — 就是对象长得一样，地址却是不一样

jQuery.extend()

作用1：就是合并对象
作用2：深克隆对象

$(function () {

      //01：浅克隆
      var a = {};
      var b = a;
      console.log(a === b); //true
      //为true的原因：就是a存储的一个对象地址，然后把这个地址赋值给了b，两者都是相同的地址，因此为true！

      //02：深克隆
      var a1 = {}
      var a2 = {}
      console.log(a1 === a2); //false
      //为false的原因：就是a1存储的是一个对象的地址，a2存储的是另一个对象的地址

      var b1 = {
        obj: {
          arr: [1, 3, 5],
          ax: 20
        }
      }
      // IE8 +  的浏览器 ---  对象的深克隆 黑科技;
      var b3 = JSON.parse(JSON.stringify(b1));
      console.log(b1 === b3); //false
      // 1. 把对象变成了纯字符串;  2. 用解析器把字符串重新解析成对象;

      //深克隆的克隆方式：
      var c = $.extend(true, {}, b1)
      console.log(b1 === c); //false
      // jQuery.extend() 
      // 作用： 函数用于将一个或多个对象的内容合并到目标对象。一般用于默认参数的设置，后面是传递的参数！最后合并到目标对象之中！
      // 参数： 参数1：为目标对象（后面的对象，将会被合并到这边） 参数2-。。。：准备被合并的对象

      // 优化代码结构 :
      // 面向对象 : 构造函数 + 原型对象;
      function Factory(){}
      // Factory.prototype.init = function(){}
      // Factory.prototype.bindEvent = function(){}
      // Factory.prototype.xxx = function(){}

      // 使用 $.extend 优化;
      $.extend( Factory.prototype , {
         init : function(){
                        
         },
          bineEvent : function(){}
        })
      var fac = new Factory();
      console.log(fac);
    })

查看全文

https://www.xamrdz.com/web/2gs1933086.html

jquery 如何接收post参数 jquery怎么发送请求

目录

jq之ajax

使用jq发起一个简单的get请求

使用jq发起一个简单的post请求

发起一个简单的load请求

$jquery 如何接收post参数 jquery怎么发送请求,jquery 如何接收post参数 jquery怎么发送请求_json_02,第2张$ post和$().load()的区别

发起一个$.ajax请求

$.ajax发起一个jsonp请求

$ajax发起一个请求，实现类似懒加载的那种效果

jq之中处理回调函数的deferred对象 — 延迟对象！

延迟对象方法的介绍

延迟对象的创建

jq的多库共存

深浅克隆

相关文章：