jQuery-AJAX get() 和 post()方法,jQuery ajax() 方法
什么是 jQuery ?
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- 提示: 除此之外,jQuery 还提供了大量的插件。
为什么使用 jQuery ?
- Microsoft
- IBM
什么是 AJAX?
关于 jQuery 与 AJAX
下面写一下jQuery-AJAX get() 和 post()方法,以及jQuery ajax() 方法
一、get方法
- 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"); }
测试如下
二、post方法
- 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一样
三、jQuery 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"); }
测试如下,这个是在控制台输出的