AJAX基础项目实战

最新推荐文章于 2020-07-03 22:50:22 发布

gegejiawei

最新推荐文章于 2020-07-03 22:50:22 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web组件化结构开发文章标签： ajax

本文链接：https://blog.csdn.net/gegejiawei/article/details/106838332

Web组件化结构开发专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍jQuery如何封装Ajax，实现前后端联动，包括二级联动菜单、登录案例等具体应用，涵盖参数传递、数据类型处理及错误处理等关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目一：二级联动菜单实现

jQuery对ajax的支持

1、jQuery对ajax进行封装，提供了$.ajax();
2、语法：$.ajax(options); – 传入json对象
在这里插入图片描述

常用设置项及说明

案例执行步骤

1、准备后台数据
在这里插入图片描述
2、准备前端页面
– Ajax文件下新建前端页面
3、对于json中的data参数遇到多个，怎么写？
(1) 第一种方式：字符串拼接 – “data”:”t=pypl&abc=123&uu=777”,
(2) jquery为我们提供了json的书写方式 – “data”:{“t”:“pypl”,“abc”:“123”,“uu”:“777”},
参考之前年月日的三级联动

实现效果

在这里插入图片描述

项目部分源代码

 $(function(){
      $.ajax({
        "url":"http://localhost:8080/channel",
        "data":{"level":"1"},
        "type":"get",
        "dataType":"json",
        "success":function(json){
          console.log(json);
          for(var i=0;i<json.length;i++){
            var ch = json[i];
            $("#lv1").append("<option value='"+ ch.code +"'>"+ ch.name +"</option>");
          }
        }
      })
    })

    $(function(){
      $("#lv1").on("change",function(){
        var parent = $(this).val();
        console.log(parent);
        $.ajax({
          "url":"http://localhost:8080/channel",
          "data":{"level":"2","parent":parent},
          "dataType":"json",
          "type":"get",
          "success":function(json){
            console.log(json);
            //移除lv2下的所有原始options项
            $("#lv2>option").remove();
            for(var i=0;i<json.length;i++){
              var ch = json[i];
              $("#lv2").append("<option value='"+ ch.code +"'>"+ ch.name +"</option>");
            }
          }
        })
      })
    })

项目二：登录案例 – 联动后端服务器

使用Ajax进行前后台的联动

案例执行步骤

1、准备user用户数据
去除两端空格 – $.trim() – 这个函数表示去除字符串两端的空白字符
2、新建ajax.html页面
(1) 登陆失败
在这里插入图片描述
(2) 登陆成功

(3)url地址、请求类型不匹配。服务器异常；

项目部分源代码

$.ajax({
	url:"http://localhost:8080/ajax11",
	data:{
		username:username,
		password:password
	},
	type:"post",
	dataType:"json",
	async:true,//false使用同步，true表示异步
	success:function(req){
		if (req.success==1) {
			console.log(req.user);
			alert('登陆成功！');
			$(location).attr('href','index.html');
		} else {
			alert('登录失败！');
			$(location).attr('href','user.html');
		}		
	},
	error:function(xmlHttp,errorText){
		console.log(xmlHttp);
		console.log(errorText);
		alert("请求异常，请联系管理员解决！");
		$(location).attr('href','user.html');
	}
})