jquery实现留言板和ajax

留言板

<body>
    <label for=""><input type="text" name="message"></label>
    <ol id="list"></ol>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
    </script>
    <script>
   $("input").keydown(function(ev){
       if(ev.key=="Enter"){
        if($(this).val().length===0){
                   alert("内容不能为空");
               }else{
                   const str=`<li>${$(this).val()}</li>`;
                  // list.insertAdjacentHTML("afterbegin",str);
                   $("#list").append(str);
                //清空上条数据
                ev.currentTarget.value=null;
                }
       }
   });
   $("#list").on("click",function(ev){
            $(ev.target).remove();
        });
    </script>
</body>

jquery中的添加元素方法

//子元素.appendTo(父元素)
$('<h2>php中文网</h2>').appendTo(document.body);
//父元素.append(子元素)
$("body").append("<ol></ol>");
//append也可跟函数
$("ol").append(()=>{
let str="";
for(let i=0;i<5;i++){
str +=`<li><a href="">你好${i+1}</a></li>`
}
return str;
});

jquery中的请求方法

1.get请求方式
$.get(请求url,查询参数,成功回调);

  <button class="get">$.get();请求数据</button>
<script>
    $(".get").click(function (ev){
       $.get("php文件",{id:2},function(data){
           $(ev.target).after("<div></div>").next().html(data);
       })
    });
</script>

2.post请求
$.post(请求url,查询参数,成功回调);

  <button class="post">$.post();请求数据</button>
<script>
    $(".post").click(function (ev){
       $.post("php文件",{id:2},function(data){
           $(ev.target).after("<div></div>").next().html(data);
       })
    });
</script>

3.$.ajax封装了get和post请求

$.ajax({
//参数有很多
type:请求类型，
url:访问地址，
data:发送到服务器的数据，
dataType:预期服务器返回的数据类型,默认xml,json,script,html
success：成功后的回调函数，这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据
});

jQuery 发送的所有 Ajax 请求，内部都会通过调用 $.ajax() 函数来实现。通常没有必要直接调用这个函数，可以使用几个已经封装的简便方法，如$.get()和.load()

 $.ajax({
    type:'get/post',
    url:'users.php',
    data:{id:2},
    dataType:'html',
    success:function(data){
}
 });

$.ajax实现jsonp

jsonp只能在get方式上，返回到的是一个函数

$.ajax({
    type:'get',
    url:'users.php?id=2&jsonp=?',
    data:{id:2},
    dataType:'jsonp',
    success:function (data){
        $("button:last-of-type").next().html(`${data.name} ${data.email}`)
    }
 });

留言板

jquery中的添加元素方法

jquery中的请求方法

$.ajax实现jsonp

相关文章