jQuery实战:留言本及ajax请求

一:用jQuery实现简单的留言板

首先需要在html中建立一个input输入框和一个空列表

<label ><input type="text" name="message" id="message"></label>
<ol id="list"></ol>

然后就看jq表演啦

    $("#message").on("keydown",function (ev){
      if (ev.key==="Enter"){
          if($(this).val()===""){//非空验证
              alert("Please enter something!");
              //把空字符串也删了
              $(this).val(null);
          }
          //创建一个li,并把输入的内容赋值进去,顺带加个删除功能
          let msg =  `<li>${$(this).val()}[<a style="color: red; font-size: .5em" onclick="$(this).parent().remove()">删除</a>]</li>`
          //把创建好的内容添加到消息列表里面去
          $(msg).appendTo($("#list"));
          $(this).val(null);//清空轮入框
      }
    })

检验成果的时候到了,我们啥也不输入来试试效果:

输入一点什么试试:


试着删除一条:

---

二:$.get,$.post,jsonp做一个积分查询系统

HTML代码如下:

    <h3>分数查询</h3>
    姓名：<input type="text" name="uname" id="uname" value="" />
    <br /><br />
    <input type="submit" onsubmit="return false" id="post" value="post提交"/>
    <input type="submit" onsubmit="return false"  id="get" value="get提交"/>
    <input type="submit" onsubmit="return false"  id="JasonPadding" value="JsonP提交"/>
    </div>

后台使用php接受并返回数据:
后台1:处理$.get以及$.post

$uname = $_REQUEST["uname"];
//根据$uname到用数组模拟的数据库中查询相关的数据
$hy = array(
    ["uname"=>"小明","score"=>"99"],
    ["uname"=>"小红","score"=>"80"],
    ["uname"=>"小刚","score"=>"98"],
    ["uname"=>"琉璃大佬","score"=>"100"],
    ["uname"=>"米法大佬","score"=>"100"]
);
//数据验证
for($i=0;$i<count($hy);$i++){
    if(in_array($uname,$hy[$i])){
        echo $hy[$i]["score"];
    };
};

后台2:处理jsonp

<?php
header('content-type:text/html;charset=utf-8');
// 获取回调名称
$callback = $_GET['jsonp'];
$id = $_GET['id'];
// 模拟接口数据
$users = [
    0=>'{"name":"朱老师", "email":"peter@php.cn"}',
    1=>'{"name":"西门老师", "email":"xm@php.cn"}',
    2=>'{"name":"猪哥", "email":"pig@php.cn"}'
];
if (array_key_exists(($id-1), $users)) {
    $user = $users[$id-1];
}
// echo $user;
// 动态生成handle()的调用
echo $callback . '(' . $user . ')';

---

以下是前端jQuery代码:

        let url = "test2.php";
//post请求：
        $("#post").click(function(){
            $.post(url, {"uname":$("#uname").val()},function (data){
                alert(`您的分数是：${data}分`);
                console.log(data);
                }
            )
        })
        //-----------------------------------
//get请求：
        $("#get").click(function(){
            $.get(url,{"uname":$("#uname").val()},function(data){
                alert(`您的分数是：${data}分`);
                console.log(data);
            })
        })
       //----------------------------------------
//Jsonp请求:
        $("#JasonPadding").click(function (ev) {
            $.ajax({
                type: "get",
                url: "test3.php?id=2&jsonp=?",
                dataType: "jsonp",
                // 告诉跨域访问的服务器需要返回的函数名称
                //   jsonpCallback: "show",
                success: function (data) {
                    console.log(data);
                },
            });
        });
    </script>

运行成果如下:

成功返回了信息: