jq的ajax初级使用

//建议在不跨域的情况下使用该请求,因为我还没有测试在跨域时的请求。

<div id="box">
<ul>

</ul>
</div>

<button type="button"  onclick="lond()">测试ajax</button>//点击按钮发起请求(注意路径)
 
function lond(){ //创建一个方法,当需要使用ajax时,调用方法。
      $.ajax({
      url:"此处放置路径", //这里放置一个路径。
      methods:'post', //请求的方式,一般为GET/POST
      dataType: 'json', //请求返回的数据格式为json
      data:{ //请求时的一些参数,下面的参数可以理解为请求 上面这个路径  且 数据内部 Id 为123 ,page 为 0 的一组数据。
        id: 123,
        page : 0,
      },
      success:function (res) { //当请求成功时做出的函数操作。
        console.log(123);  //可以在console内查看是否请求成功。
          console.log(res.data);   //在console内查看请求回来的数据,然后根据数组进行页面渲染(一般来说,从后台拿取的数组都是以data命名的这个需要看实际情况)。
          var lengths=res.data.length; //拿取这组数据的长度(一般来说后台给的数据会是数组,所以此处获取的是拿到的数组的个数)。
          for( let i=0;i<lengths;i++){ //将数组循环遍历,并在循环内部完成页面的渲染(可以先在页面内部设定好样式,然后将对应的数据填入对应的元素内部) 
            var ls=res.data[i];  //定义一个变量,将所有的数组赋予这个变量(i,是每次循环相对应的数组)。
          //  console.log(ls); //可以将每次循环的数组显示在console(不建议使用,可以在数据较少,并且测试数据时进行使用)。
            $("#box>ul").append( '<li><a href= ' + "aaa.html ? ceshi_id=" + ls.id + " & id = " + ls.menu_id + '>  <img src= '+ ls.img +' alt="图片"></a></li>');
//此处是一个添加语句,将获取到的数据动态添加到一个 id 为box的子代ul元素里面。 添加的内容为,<li><a><img /></a></li>
//添加的内容解析,最外边一个  li 元素,无需过多的操作,然后里边一个 a 标签,用于页面跳转,如果需要调转的页面不多,完全可以删除这个标签,里面的蓝色字体就是在 请求返回的数据内部拿取到的内容,
//  ls是被赋予动态数组的变量,所以刻意直接通过  .id  等,拿取到需要的数据,然后通过 js的字符串连接 添加到他应该在的位置
          
          };//这里只写了一个成功时的函数方法,如果是失败的话,需要另外一个方法,详情可以别处查询,代码的编写与成功差不多。
      }
    });
  };
忍一时,越想越气; 退一步,哎呦我去!
原文地址:https://www.cnblogs.com/l-ialiu/p/13644559.html