第十九课 表单事件&键盘事件&GET方法

表单事件

• submit
  当提交表单时触发的事件
• change
  当元素发生变化时触发的事件
• focus
  当元素获得焦点时触发的事件
• blur
  当元素失去焦点的时候触发当事件

代码演示

引入 Jquer CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

HTML代码片段：

<form action="" onsubmit="return false">
    <p>账户：<input id="user" type="text"><span id="user_msg" style="display:none">请输入账号！</span></p>
    <p>密码：<input id="pwd" type="password"></p>
    <p>城市：
        <select name="city" id="city">
            <option value="">请选择</option>
            <option value="我选择了北京">北京</option>
            <option value="我选择了上海">上海</option>
            <option value="我选择了广州">广州</option>
            <option value="我选择了深圳">深圳</option>
        </select>
    </p>
    <button>登录</button>
</form>

JS代码：

<script>
    //submit事件
    $("form").submit(function(){
        console.log("我执行了提交操作");
    })
    //change事件
    $("#city").change(function(){
        alert($("#city").val());
    })
    //focus事件
    $("#user").focus(function(){
        $("#user_msg").show();
    })
    //blur事件
    $("#user").blur(function(){
        let user_val = $("#user").val();
        if (!user_val) {
            $(this).focus();
        }else{
            $("#user_msg").hide();
        }
    })
</script>

---

键盘事件

• keydown
  键盘按下就触发事件，在文字输入之前执行
• keypress
  键盘按下去的时候触发的事件
• keyup
  键盘松开弹起的时候触发的事件

代码演示

HTML 代码片段

<input id="user" type="text">

JS 代码

<script>
    $("#user").keydown(function(){
        console.log("1.按下");
    })
    $("#user").keypress(function(){
        console.log("2.按下去");
    })
    $("#user").keyup(function(){
        console.log("3.松开弹起");
    })
</script>

---

Ajax $.get() 方法

• 使用HTTP GET 方式请求服务器的数据
• Jquery从服务器获取数据有两种数据格式：XML、JSON，常用JSON
• 语法格式：$.get(url,data,function(),dataType)
  url：服务器的数据接口，一般为：网址、域名、IP地址
  data：传给服务器的数据
  function() ：接口返回的数据和状态
  dataType ：数据格式类型：XML、JSON

代码演示

URL数据接口
http://admin.ouyangke.cn/index.php/api/index/prov_list/

HTML 代码片段

<table>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>首字母</th>
        <th>拼音</th>
        <th>纬度</th>
        <th>经度</th>
    </tr>
</table>

引入 Jquer CDN：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

JS 代码：

<script>
   $.get(
       "http://admin.ouyangke.cn/index.php/api/index/prov_list/",
       {
           page:1,
           limit:15,
           fields:"area_id",
           order:"desc",
       },
       function(data,status){
            let html_data = "";
            for(let i = 0; i< data.data.length; i++){
                html_data += "<tr><td>"+data.data[i].area_id+"</td><td>"+data.data[i].area_name+"</td><td>"+data.data[i].pinyin+"</td><td>"+data.data[i].first_pinyin+"</td><td>"+data.data[i].lng+"</td><td>"+data.data[i].lat+"</td></tr>";
            }
            $("table").append(html_data);
       },
       "json"
   )
</script>