ajax从零基础到实战

一. 什么是AJAX?

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

二. 在项目中怎么运用AJAX?

项目主要文件夹目录有img文件夹,css文件夹,js文件夹,如果你要运用到ajax,那么你可以在js里面建立一个js文件存放ajax代码,在相应html页面引入这个js文件即可。

三. AJAX的结构怎么写?

        //ajax的结构
            $(function(){
                $.ajax({
                    url:"https://www.xxxx.com/shop/xxxxxxx/", //放置你的接口
                    type : "GET", //接口的请求方式(get/post)
                    async : false, //是否异步
                    success : function(data) {
                        console.log("------成功了")
                    },
                    error : function(err) {
                        console.log("------出错了",err)
                    }
                });
            })
            

四. AJAX的接口参数怎么传?

1.接口的形式是:https://www.xxxx.com/shop/xxxxxxx/?userId=123&psw=abc123&name=骑马行天下 ;

2.根据后台给的接口文档来选择上传哪些参数;

3.参数从哪里获取呢?

a.从你该接口相对应的html页面里面获取;

b.获取形式为:var psw = $("input[name=‘phones‘]").val()   //这种是获取到input输入框里面的值

var name = $("#username").html()    //这种是获取到标签里面的内容

代码如下:

    //例如登录接口要传手机号和密码两个参数
    $("#denglu").click(function() {
        var userinfo = {
            "UserPhoneNum": ‘86//‘ + $("input[name=‘phones‘]").val(), //手机号参数
            "Password": $("input[name=‘pwd‘]").val()  //密码参数
        }

        $.ajax({
            url: "https://www.xxxxxx.cn/user/xxxxx/",   //登录接口
            data: userinfo,   //整合手机号和密码的参数
            type: "get",
            success: function(data) {
                if(JSON.parse(data).state === 201 || JSON.parse(data).state === 202) {
                    alert("登录失败,请前往注册")
                } else {
                    alert("登录成功")
                    window.location.href = ‘index.html‘;
                }
            },
            error: function() {
                alert("登录失败");
            }
        });

    });

五. 怎么用AJAX在页面渲染接口数据?

1.首先在html页面写出能够呈现死数据的html代码;

2.然后书写商品列表接口,获取到里面的json数组并呈现到页面;

代码如下:

            //商品接口在页面渲染数据
            $(function(){
                $.ajax({
                    url:"https://www.xxxxxx.com/shop/xxxxxxx/",
                    type : "GET",
                    async : false,
                    success : function(data) {
                        var obj=JSON.parse(data).list;  //定义一个obj,获取到接口数据为list的数组
                        var str="";   //定义一个空文件
                        $(".books").empty();   //把你要渲染的数据那块给清空,然后加入接口数据变成活数据

                        if(obj!=null){                            //遍历obj数组
                            $(obj).each(function(i,v){
                             //你之前写的html里面的死数据代码
                             str+=‘<a class="to-product" target="_blank">‘;
                                   str+=‘<div class="books-con-lists bookarr">‘;
                                      str+=‘<img src=‘+v.picPath+‘ />‘;
                                      str+=‘<p class="p1">‘+v.goodsName+‘</p>‘;
                                      str+=‘<p class="p2">‘+v.goodsresume+‘</p>‘;
                                      str+=‘<p class="p3"><span class="p4">¥</span>‘+v.price+‘.00‘+‘</p>‘;
                                   str+=‘</div>‘;
                               str+=‘</a>‘; 

                            });
                            $(".books").append(str);   //使用append参数把内容加上去
                        }

                    },
                    error : function(err) {
                        console.log("渲染出错了",err)
                    }
                });
            })
            

六. 怎么异步刷新呈现在页面上面的内容?

例如:如果你有一个获取收货地址的接口,你呈现在页面上面,然后你重新添加一条,收货地址列表没有改变,重新刷新页面才能改变,如果你要点击保存就刷新掉收货地址列表而不用刷新整个页面怎么实现呢?

代码如下:

$(function() {    InitData(); //加载收货地址})

//收货地址呈现数据列表接口
function InitData() {

    $.ajax({
        url: "https://www.xxxxx.com/user/xxxxxx/", //收货地址
        type: "get",
        async: true,
        success: function(data) {
        }    })
}
 $("#jiaru").click(function() {

        $.ajax({
            url: "https://www.xxxxxx.cn/user/xxxxx/",   //重新加入一条收货地址接口
            type: "get",
            success: function(data) {
                InitData();  //加入成功后,再次调用一次查询收货地址接口,就能实现异步刷新
            },
            error: function() {
                alert("加入失败");
            }
        });

    });
 

七. 登录成功后获取到用户userId怎么在后面的接口引用到呢?

1.首先登录成功后返回给你一个用户id,参数比如说是userId,你可以cookie保存一下然后到后面获取到;

2.怎么cook保存呢?

a.建立一个全局js文件,全局定义一下cookie:

//Cookie全局
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}

b.在登录接口页setCookie保存到userId:

//登录
    $("#denglu").click(function() {

        $.ajax({
            url: "https://www.xxxxxx.cn/xxxxx/login/",
            data: "",
            type: "get",
            success: function(data) {
                var userId = JSON.parse(data).UserID;  //从接口返回值里面取到userId
                setCookie("UserId", userId)   //set保存一下方便后面取到
                if(JSON.parse(data).state === 201 || JSON.parse(data).state === 202) {
                    alert("登录失败,请前往注册")
                } else {
                    alert("登录成功")
                    window.location.href = ‘index.html‘;
                }
            },
            error: function() {
                alert("登录失败");
            }
        });

    });

c.在其他页面getCookie获取到userId:

var userId = getCookie("UserId");   //在上面提到的接口传值,getcookie获取到userId

3.sessionStorage保存方法:

sessionStorage.obj = JSON.parse(data).OrderID;

八. 没有接口的情况下,怎么把一个页面的值传到其他页面?

1.url传值方法:

$(".to-product").eq(0).click(function(){
     $(".to-product").eq(0).attr("href","bookdetail/productdetail1.html?goodsID="+obj[0].goodsID+"");
})

2.其他页面取值:

function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if(r != null) return unescape(r[2]);
        return null; //返回参数值
    }
var goodsID = getUrlParam(‘goodsID‘); //接收URL中的参数booksId

3.重点注意:这种方法不利于上传价格之类容易篡改信息的数据,建议其他数据通过接口的方法获取;

九. 怎么清空cookie保存的数据(比如退出登录效果)

//获取到用户IDvar userId = getCookie("UserId");//判断一下userId是否为空
if(userId !=null){
    $(function(){      //点击按钮退出登录
      $(".header-con").children(".p2").children("a:eq(1)").click(function(){
            clearAllCookie();  //清空cookie的方法
      })
    })
}else{

}

//清除所有cookie函数
function clearAllCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if(keys) {
        for(var i = keys.length; i--;)
            document.cookie = keys[i] + ‘=0;expires=‘ + new Date(0).toUTCString()
        }
 }

十. 怎么获取接口中单个列表信息的数据?

1.遍历列表获取到该商品的信息,取到想要得到的id或者价格:

//遍历$(‘#txt-list tr‘).each(function() {

  var _value = $(this).find(‘td‘).next(".isCurrent").text();
  if(parseInt(_value) == 1) {

} else {

  }
});

2.parent和next方法等:

var addressID = $(this).parent("a").parent("td").next("td").next("td").html();

十一. 怎么拼接字符串并放到一个数组里面?

1.先创建一个新的对象,遍历json数组,然后拼接完成之后,去掉拼接进去的数组[ ]符号以及字符串的\符号:

        var goodsDetail = new Array();
        $(‘#s-infos li‘).each(function(index){
            if($(this).find(‘div‘).children(‘.mh-dxone‘).prop(‘checked‘)){
               var goodsID = $(this).find(‘div‘).next(".goodsID").text(),
               quanlity = $(this).find(‘div‘).next(".shopcart-info-num").children(".cartnum").val();
               goodsDetail.push(‘[{"goodsID":‘ + goodsID + ‘,"quanlity":‘ + quanlity + ‘}]‘);
           }
       })
        var straaa = JSON.stringify(goodsDetail);
        var strbbb = straaa.replace(‘"[‘, "");
        var strccc = strbbb.replace(‘]"‘,"").replace(/[\\]/g,‘‘);

十二. 总结

ajax介绍就暂时到这里告一段落了,如果博文有什么错误或者不懂的地方,欢迎在博文下面留言,博主有时间将一一解答,同时ajax从零基础到实战也不是看看就能理解的,希望大家能够边自己实践边理解,这样更有利于大家成长,谢谢!

原文地址:https://www.cnblogs.com/hejun26/p/9613146.html

时间: 2024-11-05 01:12:13

ajax从零基础到实战的相关文章

零基础Swift实战开发视频教程_从入门到精通

零基础Swift实战开发从入门到精通(4大项目实战.酷跑熊猫.百度音乐.足球游戏等)适合人群:初级课时数量:50课时更新程度:86%用到技术:Swift涉及项目:酷跑熊猫.百度音乐.足球游戏咨询qq:1840215592零基础Swift实战开发视频教程采用基础+项目的方式进行讲解,通过基础的学习,可以完全掌握Swift基本语法应用,并结合4个项目进行开发,学员能在最短的时间内掌握开发的各项技能. 零基础Swift实战开发从入门到精通详细查看:http://www.ibeifeng.com/goo

零基础入门 实战mpvue2.0多端小程序框架

第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟快速入门微信小程序(已掌握,可略过)在这一章节中,老师讲带领你从如何注册微信小程序开发者账号.工具的下载开始,到完成第一个小程序,再到组件与 API 的使用整个过程,最后来总结微信原生小程序的缺点. 第3章 30 分钟快速入门 Vue.js 框架(已掌握,可略过)在这一章节中,老师将带领你从第一个

零基础软件测试实战视频教程

零基础实战软件测试工程师就业班(共五阶段.快速掌握主流测试工具)课程讲师:孙老师课程分类:品牌套餐适合人群:初级课时数量:190课时用到技术:QTP自动化测试.Loadrunner性能测试工具涉及项目:汝城县网上审批大厅咨询qq:1840215592课程简介北风网软件测试工程师系列培训.软件测试工程师实训系列总课时190课时,每课时为40分钟以上. 学习对象有志于在IT软件-软件测试行业寻求发展的人员,或者已经在已经从业软件测试的普通测试工程师.高级测试工程师.测试主管.测试经理.项目经理以及质

零基础Swift实战开发从入门到精通(4大项目实战、酷跑熊猫、百度音乐、足球游戏等)

第一部分:Swift基础语法 第1节:变量 第2节:常量 第3节:使用PlayRound编写Swift程序 第4节:类型检查与推断 第5节:类型别名 第6节:计算器 第二部分:字符和字符串 第1节:字符(Characters) 第2节:字符串-定义 第三部分:数据类型(DataType) 第1节:整型(int.Uint) 第2节:浮点数 第3节:Bool 第四部分:数据类型转换 第1节字符串转换数字类型 第2节数字类型转换字符串 第3节:数字类型之间转换 更多............ 项目实战一

WebGL可视化3D绘图框架:Three.js 零基础上手实战

课程下载地址:https://pan.baidu.com/s/1680So9jGlArFqB26PvII9g 提取码: br43 本课程主要的功效就是让你学习完本教程后,能够写出在浏览器上流畅运行的3D程序,包括但不限于:大数据可视化,360度全景展示,3D游戏,完成这些事情,会比c++用更少的代码.而且更容易,更酷. 在本课程中,我们将由浅入深的讲解这些效果的实现,这能让你迅速提高开发技能,在职场中处于不败之地.课程共十三章,大大小小贯穿了近10个案例,只要你具备基础的HTML和JavaScr

.net实战项目零基础学习视频教程,.net就业课程网络教学

推荐一套从零基础开始学习.net开发的教程,在线上课,不影响正常上班,只需要半年就能让自己成为.net开发工程师的大牛 1.从.NET负基础开始讲起,内容贯穿C#语法基础,新语法特性.网页技术,数据库技术,客户端技术,Winform,WPF,ASP.NET,MVC等众多内容,成体系,所有的内容零基础,讲师手把手教学,在线学习,视频答疑,远程指导,34个企业常见的经典案例,包括了.NE开发技术的方方面面,能够解决企业开发90%的问题.2.课程使用的开发工具及涉及的技术都是最新的如:C#5,MVC5

下载零基础数据分析与挖掘R语言实战课程(R语言)

随着大数据在各行业的落地生根和蓬勃发展,能从数据中挖金子的数据分析人员越来越宝贝,于是很多的程序员都想转行到数据分析,挖掘技术哪家强?当然是R语言了,R语言的火热程度,从TIOBE上编程语言排名情况可见一斑.于是善于学习的程序员们开始了R语言的学习之旅.对于有其他语言背景的程序员来说,学习R的语法小菜一碟,因为它的语法的确太简单了,甚至有的同学说1周就能掌握R语言,的确如此.但是之后呢?……好像进行不下去了!死记硬背记住了两个分析模型却不明其意,输出结果如同天书不会解读,各种参数全部使用缺省值,

《Android Studio开发实战 从零基础到App上线》资源下载和内容勘误

http://blog.csdn.net/aqi00/article/details/72907534 http://blog.csdn.net/aqi00/article/details/73065392 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 资源下载 下面是<Android Studio开发实战 从零基础到App上线>一书用到的工具和代码资源:1.本书使用的Android Studio版本为2.2.3,因为Android官网现在不提供该版本的下载,所以博主

零基础Android手机嵌入式开发实战课程

亲爱的网友,我这里有套课程想和大家分享,如果对这个课程有兴趣的,可以加我的QQ2059055336和我联系. 课程章节分布: 第一部分 嵌入式C与数据结构篇 (20讲) 第二部分ARM裸机开发篇 (43讲) 第三部分 Linux应用开发 (28讲) 第四部分 Linux系统移植 (5讲) 第五部分 Linux设备驱动 (13讲) 第六部分 Android应用开发 (38讲) 第七部分 Android系统移植 (11讲) 第八部分 Android设备驱动 (14讲) 零基础Android手机嵌入式