什么是 jQuery ?
jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。 jQuery 库包含以下功能:- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- 提示: 除此之外,jQuery 还提供了大量的插件。
为什么使用 jQuery ?
目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库,而且提供了大量的扩展。 很多大公司都在使用 jQuery, 例如:- Microsoft
- IBM
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。 使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。 您可以在我们的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。 您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。下面写一下jQuery-AJAX get() 和 post()方法,以及jQuery ajax() 方法
一、get方法
jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求:GET vs POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
- URL:发送请求的 URL字符串。
- data:可选的,发送给服务器的字符串或 key/value 键值对。
- callback:可选的,请求成功后执行的回调函数。
- dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)
1.jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:导入写好的js文件
<!-- 导入的jquery --> //src是路劲,项目名字加上文件名,按住ctrl点击路径可以进入那个文件就说明导入成功 <script type="text/javascript" src="/ajax/jquery.1.9.1.min.js"></script>
2.写好一个输入框测试,在nm框输入的内容写到pwd框中
nm:<input id="nm"><br> pwd:<input id="pwd" class="pp"><br> <input type="button" onclick="sub()" value="login">
3.sub()函数写到function里面—get方法
<script type="text/javascript"> function sub() { /* get方法 */ D=$("#nm").val(); get就是根据上面语法,这里只写链接和调用函数 $.get("http://localhost:8080/ajax/test?abcok="+D,H); } </script>
4.H函数
<script type="text/javascript"> function H(data) { /* nm的值赋给pwd */ $("#pwd").val(data); } </script>
5.写好一个servlet来接受前台传来的数据,并返回相对应的数据,使用doget和dopost两种方式()
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String ok = request.getParameter("abcok"); response.getWriter().write(ok+"666"); }
测试如下
![](/i/l/?n=22&i=blog/2999801/202211/2999801-20221122182539260-1549081862.gif)
二、post方法
jQuery $.post() 方法 $.post() 方法通过 HTTP POST 请求向服务器提交数据。 语法: $.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] )- URL:发送请求的 URL字符串。
- data:可选的,发送给服务器的字符串或 key/value 键值对。
- callback:可选的,请求成功后执行的回调函数。
- dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
1.输入框还是上面的
nm:<input id="nm"><br> pwd:<input id="pwd" class="pp"><br> <input type="button" onclick="sub()" value="login">
2.sub()函数写到function里面—post方法
<script type="text/javascript"> function sub() { /* post方法 */ D=$("#nm").val(); post就是根据上面语法,这里只写链接和调用函数,中间大括号是赋值 $.post("http://localhost:8080/ajax/test",{abcok:D},H) } </script>
3.H函数
<script type="text/javascript"> function H(data) { /* nm的值赋给pwd */ $("#pwd").val(data); } </script>
4.post的servlet
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String ok = request.getParameter("abcok"); response.getWriter().write(ok+"666"); }
测试就如下,和get一样
![](/i/l/?n=22&i=blog/2999801/202211/2999801-20221122182717363-2059771040.gif)
三、jQuery ajax() 方法
定义和用法 ajax() 方法用于执行 AJAX(异步 HTTP)请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。 语法 $.ajax({name:value, name:value, ... }) 该参数规定 AJAX 请求的一个或多个名称/值对。 下面的表格中列出了可能的名称/值:名称 | 值/描述 |
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
1.输入框还是上面的
nm:<input id="nm"><br> pwd:<input id="pwd" class="pp"><br> <input type="button" onclick="sub()" value="login">
2.sub()函数写到function里面—ajax方法,看看上面的表格,比较全
<script type="text/javascript"> function sub() { D=$("#nm").val(); $.ajax({ //布尔值,表示请求是否异步处理。默认是 true。 async:false, //规定发送请求的 URL。默认是当前页面。 url:"http://localhost:8080/ajax/test", //规定要发送到服务器的数据。 data:{abcok:D}, //规定请求的类型(GET 或 POST)。 type:"post", //预期的服务器响应的数据类型。(text格式,json格式) dataType:"text", //发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 contentType:"application/x-www-form-urlencoded", //success(result,status,xhr),当请求成功时运行的函数。 success:sc, }); } </script>
3.sc函数
<script type="text/javascript"> function sc(result) { //控制台输出,不是在pwd框输出 console.log(result); } </script>
4.因为type还是用的post所以servlet还是用dopost
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String ok = request.getParameter("abcok"); response.getWriter().write(ok+"666"); }
测试如下,这个是在控制台输出的
标签:jQuery,请求,get,AJAX,ajax,post,方法 From: https://www.cnblogs.com/YHSDDJM/p/16916083.html