Jquery笔记之Ajax
2015-12-16 09:45
771 查看
AJAX = 异步的JavaScript + XML(Asynchronous JavaScript and XML)。简单的说,就是在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
最近用的是 $.ajax() 它的一般格式为:
type:请求的方式,类型为String;值一般为post或get,默认是get
url:发送请求的地址, 类型为String;默认值:当前页地址
data:发送到服务器的数据,类型为String;必须为Key/Value格式,如果为数组,JQuery将自动为不同值对应同一个名称
dataType:预期服务器返回的类型,类型为String;服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
(1)“xml”:返回XML文档,可用JQuery处理。
(2)“html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
(3)"script":
返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET
请求。(因为将使用 DOM 的 script标签来加载)
(4) "json":
返回 JSON 数据 。
(5) "jsonp":
JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
(6)
"text": 返回纯文本字符串。
success:请求成功后的回调函数,类型Function。参数:由服务器返回,并根据dataType参数处理后的数据;描述状态的字符串。
error:请求失败时调用,类型:Function。
下面来举个栗子:jsp点击查询按钮,ajax请求servlet,然后表格显示servlet中查询的数据。
jsp中的代码:
刚开始写,所以比较弱智,把数据发送到UserFindServlet,将返回的数据设置成json(在servlet中数据得转换成json,下面代码中有演示),每请求成功一次清空一次表,然后填充数据。即得用myeclipse的时候,输出表头的时候乱码,上网查了好久硬是没找到原因,到最后大神指引,项目右键——Properties——Resource
Text file enconding改成UTF-8。把代码的编码全部改成utf-8,醉了。
下面是servlet代码:
哦,忘了,还有就是在传输checkbox类型的数据时,data:checkValue:
$("input[name='deleteId']:checked").serialize()
,先序列化成string,然后在servlet中写了个函数查找里面的数字(即选中的checkbox的Value)。感觉好low。。。
最后是不是还得写个参考....参考了w3school网站!!!
最近用的是 $.ajax() 它的一般格式为:
$.ajax({ type: "post"/"get", url: , data: , dataType: , success: function(result) { }, error: function() { } });
type:请求的方式,类型为String;值一般为post或get,默认是get
url:发送请求的地址, 类型为String;默认值:当前页地址
data:发送到服务器的数据,类型为String;必须为Key/Value格式,如果为数组,JQuery将自动为不同值对应同一个名称
dataType:预期服务器返回的类型,类型为String;服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
(1)“xml”:返回XML文档,可用JQuery处理。
(2)“html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
(3)"script":
返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET
请求。(因为将使用 DOM 的 script标签来加载)
(4) "json":
返回 JSON 数据 。
(5) "jsonp":
JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
(6)
"text": 返回纯文本字符串。
success:请求成功后的回调函数,类型Function。参数:由服务器返回,并根据dataType参数处理后的数据;描述状态的字符串。
error:请求失败时调用,类型:Function。
下面来举个栗子:jsp点击查询按钮,ajax请求servlet,然后表格显示servlet中查询的数据。
jsp中的代码:
<div class="div01"> <table id="mainTable"> <tr><td>id</td><td>姓名</td><td>性别</td><td>手机</td><td>部门</td><td>职位</td><td></td></tr> </table> </<input type="button" name="select" id="btn_select" value="查询">div>js中ajax的代码:
$(document).ready(function() { $("#btn_select").click(function() { $.ajax({ type: "post", url: "servlet/UserFindServlet", data: { department: $("#selectDepartment").val(), position: $("#selectPosition").val() }, dataType:'json', contentType:"application/x-www-form-urlencoded; charset=UTF-8", success: function(result) { if(result[0].message != null){ alert(result[0].message); } else { $("#mainTable").empty(); $("#mainTable").append( "<tr><td>id</td><td>姓名</td><td>性别</td><td>手机</td><td>部门</td><td>职位</td><td></td></tr>" ); $.each(result, function(i) { $("#mainTable").append( "<tr><td>"+result[i].id+"</td><td>"+result[i].username+"</td><td>"+result[i].sex+"</td>" +"<td>"+result[i].phone+"</td><td>"+result[i].department+"</td><td>" +result[i].position+"</td><td><input type=\"checkbox\" name=\"deleteId\" id=\"deleteCheckbox\" value="+result[i].id+"></td></tr>" ); });} } }); }); });
刚开始写,所以比较弱智,把数据发送到UserFindServlet,将返回的数据设置成json(在servlet中数据得转换成json,下面代码中有演示),每请求成功一次清空一次表,然后填充数据。即得用myeclipse的时候,输出表头的时候乱码,上网查了好久硬是没找到原因,到最后大神指引,项目右键——Properties——Resource
Text file enconding改成UTF-8。把代码的编码全部改成utf-8,醉了。
下面是servlet代码:
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String department = request.getParameter("department"); String position = request.getParameter("position"); System.out.println("department: " + department + " position : " + position); if(department.equals("") && position.equals("")) { System.out.println("�տ�"); List<UserBean> list = UserDAO.findAll(); JSONArray json = new JSONArray(list); out.print(json); out.flush(); out.close(); } else if(!department.equals("") && position.equals("")){ List<UserBean> list = UserDAO.findByDepartment(department); JSONArray json = new JSONArray(list); out.print(json); out.flush(); out.close(); } else if(department.equals("") && !position.equals("")) { List<UserBean> list = UserDAO.findByPostion(position); JSONArray json = new JSONArray(list); out.print(json); out.flush(); out.close(); } else if(!department.equals("") && !position.equals("")) { List<UserBean> list = UserDAO.findByDepartmentPostion(department, position); JSONArray json = new JSONArray(list); out.print(json); out.flush(); out.close(); } }由于DAO中返回的数据是list,为了方便转换成json,当然也可以手动==!。out.print(json):即把数据json返回给ajax,ajax在success中接收。
哦,忘了,还有就是在传输checkbox类型的数据时,data:checkValue:
$("input[name='deleteId']:checked").serialize()
,先序列化成string,然后在servlet中写了个函数查找里面的数字(即选中的checkbox的Value)。感觉好low。。。
最后是不是还得写个参考....参考了w3school网站!!!
相关文章推荐
- JQuery AJAX调用WEB SERVICE方法
- Jquery easyui从零单排之datagrid多行数据删除
- jquery $.getJSON()跨域请求
- jQuery中ready与load事件的区别
- jQuery添加和删除指定标签的方法
- jquery学习(五)-jquery中的事件
- jquery chosen 插件多选初始化
- jquery验证表单
- jquery+html5 在web页面播放提示音
- 20151215jqueryUI--dialog代码备份
- 20151215jquery学习笔记--jqueryUI --dialog(对话框)
- JQuery归纳总结(增加中...)
- JQuery归纳总结(增加中...)
- jquery实现全文检索与鼠标滑过工具栏特效
- [jQueryUI] - Chosen:select下拉选择框美化插件及问题
- jQuery中.live()方法的用法深入解析
- jquery.validate校验+jquery.form提交,配合使用
- 面向对象编写jQuery插件
- jquery学习随笔(简单选择器)
- 网页截图插件(放大插件)