jQuery+ajax 基本语法认识

<!-- 导入jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

 

2.2 选择器

1.  id选择器  <div id="值">
       $("#值").函数...

2. 标签选择器(元素选择器)  <div>
       $("标签名").函数...

3.  类选择器   <div class="值 值2">
       $(".值").函数...

 

2.3 事件绑定

// 方式1 ： 直接使用对应事件
// 绑定点击事件
$("#id").click( 函数 )

// 实例
$("#id").click(function(){
    //代码
})

// 方式2 ：使用on函数进行绑定
$("#id").on("click", 函数 );

// 实例
$("#id").on("click" , function() {
     //代码
})

2.4 常见函数

val() 、val("值")     ------   获取值、设置值

text                        ------  以文本的方式获取、设置==标签体==

attr(k [, v] )             -----  获得、设置标签==属性==

removeAttr(k)        -----  移除属性

append()               ----  追加

 

实例

// 页面加载
        $(function(){
            // 文本框的失去焦点事件
            $("#userinput").blur(function(){
                // 获得文本框内容
                var v = $("#userinput").val();
                // 判断
                if(v == "jack"){
                    // 成功提示
                    $("#spanid").text("用户名可用")
                    // 控制按钮：可用
                    $("#bid").removeAttr("disabled")
                } else {
                    // 失败提示
                    $("#spanid").text("用户名不可用")
                    // 控制按钮：不可用
                    $("#bid").attr("disabled","disabled");
                }

            })
        })

 

2.5   ajax 标准代码

 // {}  表示 javascript对象，内容“键值对” ， 
{
    "键1":"值",
    "键2":"值"
}
// jquery ajax 函数
//语法： $.ajax( js对象 )
$.ajax({
    "url":"请求路径",
    "type":"请求方式【GET/POST/PUT/DELETE】",
    "contentType":"请求的数据类型【application/json;charset=UTF-8】",
    "data": "请求的数据",
    "dataType":"响应的数据类型【json】",
    "success":"成功的处理函数【function(data){}】",
    "error":"失败的处理函数【function(){}】",
})

 

2.6 ajax 各种请求

           1.  查询所有

       $.ajax({
                    "url": "http://data.javaliang.com/data/jack/student",    //请求路径
                    "type": "get",    //请求方式
                    "contentType": "application/json;charset=UTF-8",  //请求的数据类型
                    "dataType": "json",    //"响应的数据类型
                    "success": function(data){   
                        alert('查询成功')              //成功的处理函数
                        console.info(data)
                    },
                    "error": function(){      //失败的处理函数
                        alert('查询失败')
                    }
                })

 

               2.   添加

           // 准备数据
                var student = {
                    "id": "s003",
                    "name": "李四",
                    "age" : "18",
                    "edu" : "大班"
                }
                
                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student",   //请求路径
                    "type":"post",   //请求方式
                    "contentType":"application/json;charset=UTF-8",  //请求的数据类型
                    "data": JSON.stringify(student)  ,  //请求的数据
                    "dataType":"json",  //"响应的数据类型
                    "success": function(data) {        //成功的处理函数
                        alert('添加成功')             
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {   //失败的处理函数
                        alert('失败')
                    }
                })

 

                   3.  修改

         // 准备数据
                var student = {
                    "id": "s003",
                    "name": "李四2",
                    "age" : "182",
                    "edu" : "大班2"
                }

                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student",  //请求路径
                    "type":"put",   //请求方式
                    "contentType":"application/json;charset=UTF-8",  //请求的数据类型
                    "data": JSON.stringify(student)  ,      //请求的数据
                    "dataType":"json",  //响应的数据类型
                    "success": function(data) {         //成功的处理函数
                        alert('修改成功')
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {   //失败的处理函数
                        alert('失败')
                    }
                })

                       4.   删除
                $.ajax({
                    "url":"http://data.javaliang.com/data/jack/student/s003",   //请求路径
                    "type":"delete",   //请求方式
                    "contentType":"application/json;charset=UTF-8",  //请求的数据类型
                    "dataType":"json",   //"响应的数据类型
                    "success": function(data) {          //成功的处理函数
                        alert('删除成功') 
                        console.info(data)  //将数据打印到浏览器的控制台
                    },
                    "error":function() {   //失败的处理函数
                        alert('失败')
                    }
                })