![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
<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>
//子元素.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;});
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,htmlsuccess：成功后的回调函数，这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据});
jQuery 发送的所有 Ajax 请求，内部都会通过调用 $.ajax() 函数来实现。通常没有必要直接调用这个函数，可以使用几个已经封装的简便方法，如$.get()和.load()
$.ajax({type:'get/post',url:'users.php',data:{id:2},dataType:'html',success:function(data){}});
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}`)}});