十八 JQuery&Ajax&Json&Xstream
1 JQuery与Servlet数据交互，load方式(少用)
语法：$("#元素id").load(url地址，callback); callback:回调的函数
function load() {
$("#text01").load("/8AjaxAndJquery/DemoServlet02",
function(responseTxt, statusTxt, xhr) {
alert("结果：" + responseTxt);
//拿到id为text01的标签，将其value设置为服务器传过来的responseTxt
$("#text01").val(responseTxt);
}
);
}
2 JQuery与Servlet数据交互， Get方式
语法：$.get(URL,callback);
function get() {
//function(接收的数据，状态码)
$.get("/8AjaxAndJquery/DemoServlet02" , function(data,status){
//给div添加内容,可以使用.html或者.text
$("#div01").html(data);//可添加<font>
// $("#div01").text("da:"+data);
});
}
3 JQuery与Servlet数据交互，Post方式
语法：$.post(URL,data,callback);
<script type="text/javascript">
function post() {
//$.post(url,页面向Servlet发送的数json格式的数据,function(接收的数据，状态码)
$.post("/8AjaxAndJquery/DemoServlet02",{name:"zhangsan" , age:18},function(data,status){
alert("页面接收的数据:"+data);
$("#div01").html(data);
});
};
</script>
4 JQuery实现用户名校验
<script type="text/javascript">
function checkUserName() {
//获取输入框的内容
var name = $("#name").val();
//发送请求,$.post(URL，JSON，function(接收的数据，状态码))
$.post("/8AjaxAndJquery/CheckUserNameServlet" ,{name:name}, function(data,status){
if(data == 1){
$("#span01").html("<font color='red'>对不起！用户名已存在</font>");
}else{
$("#span01").html("<font color='red'>恭喜！用户名可用</font>");
}
});
}
</script>
5 JQuery实现百度下拉框功能
1 前端JQ代码：键盘弹起事件keyup
//1捕捉键盘弹起事件
//在文档准备就绪的时候，对某一个元素进行onkeyup监听
//$(document).ready(function(){});
$(function() {
$("#word").keyup(function() {
//2获取输入框的值
var word = $(this).val();
if (word == "") {
$("#div01").hide();
} else { //3请求数据
$.post("/8BDSearch/FindWordsServlet", {
word : word
}, function(data, status) {
$("#div01").show();
$("#div01").html(data);
});
}
})
});
2 Servlet，交互查询关键字，将下拉框内容用jsp页面转发出去
rotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
// 1 获取参数
String word = request.getParameter("word");
// 2 dao查询
WordDao dao = new WordDaoImpl();
List<WordsBean> list = dao.findWords(word);
// 3 返回数据
// response.getWriter().write("数据是："+word);
request.setAttribute("list", list);
//将list.jsp里面的内容返回给页面
request.getRequestDispatcher("list.jsp").forward(request, response);
}
3 list.jsp，下拉框内容
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<body>
<table style="width: 600px ; height: 200px">
<c:forEach items="${list }" var="wordsBean" >
<tr>
<td>${wordsBean.words }</td>
</tr>
</c:forEach>
</table>
</body>
6 JQuery实现省市联动，XML方式：
1 Servlet: 拿到客户端的pid，调用业务层获得城市list , 将其封装成xml对象发送给客户端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("utf-8");
//1 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3 返回数据--->使用XStream将对象转成xml,传输数据：xml或者JSON
XStream xStream = new XStream();
//想把id做成属性
// xStream.useAttributeFor(CityBean.class, "id");
//设置别名
xStream.alias("city", CityBean.class);
//转换一个对象成xml字符串
String xml = xStream.toXML(list);
// System.out.println(xml);
//代表返回的是文本类型的xml数据
response.setContentType("text/xml;charset=UTF-8");
response.getWriter().write(xml);
}
2 前段JSP，页面整体骨架：
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/city.js" charset="utf-8"></script>
<body>
省份：
<select name="province" id="province">
<option value="">-请选择-
<option value="1">广东
<option value="2">湖南
<option value="3">四川
</select>
城市：
<select name="city" id="city">
<option value="">-请选择-
</select>
</body>
3 JS，实现省市联动功能
$(function(){
// 1 找到省份元素
$("#province").change(function(){
//2 一旦里面的值发生改变，发送请求
var pid = $(this).val();
/*<list>
<city>
<id>1</id>
<cname>深圳</cname>
<pid>1</pid>
</city>
</list>
*/
$.post("/8BDSearch/CityServlet",{pid:pid},function(data,status){
//先清空以前的值：
$("#city").html("<option value=''>--请选择")
//遍历:find方法获得当前每个元素的后代，each方法进行迭代，从data数据里面拿到所有的city,遍历一次city执行一次function方法
$(data).find("city").each(function(){
//this代表当前的city,取出他们的孩子，id，cname
var id = $(this).children("id").text();
var cname = $(this).children("cname").text();
//给city元素赋值
$("#city").append("<option value='"+id+"'>"+cname)
});
});
});
});
7 JQuery实现省市联动，JSON方式：语法：$.post(URL,data,callback，"json(指明传输形式)");
JSON和xml比较：
- xml:臃肿
- json:阅读性更好、容量更小(推荐使用)
常用对象：
- JSONArray --->变成数组，集合[]
- JSONObject --->变成简单的数据 {name:zhangsan , age:18}
1 Servlet: 拿到客户端的pid，调用业务层获得城市list , 将其封装成JSON对象发送给客户端
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
//1 获取参数
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3 把list集合转JSON数据
// JSONArray --->变成数组，集合[]
// JSONObject --->变成简单的数据 {name:zhangsan , age:18}
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
System.out.println("json="+json);
response.getWriter().write(json);
}
2 前端JSP，页面整体骨架：
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/json.js" charset="utf-8"></script>
<!-- <script type="text/javascript" src="js/city.js" charset="utf-8"></script> -->
<body>
省份：
<select name="province" id="province">
<option value="">-请选择-
<option value="1">广东
<option value="2">湖南
<option value="3">四川
</select>
城市：
<select name="city" id="city">
<option value="">-请选择-
</select>
3 JS，实现省市联动功能
$(function(){
// 1 找到省份元素
$("#province").change(function(){
//2 一旦里面的值发生改变，发送请求
var pid = $(this).val();
/*json=[
{"cname":"深圳","id":1,"pid":1},
{"cname":"东莞","id":2,"pid":1}
...
]*/
$.post("/8BDSearch/CityServlet02",{pid:pid},function(data,status){
// 清空以前的数据
$("#city").html("<option value=''>---请选择");
//遍历
$(data).each(function(index , c) {
// alert(c.cname);
$("#city").append("<option value='"+c.id+"'>"+c.cname);
});
},"json");
});
});
十八 JQuery&Ajax&Json&Xstream的更多相关文章
- 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net
练习 jquery+Ajax+Json 绑定数据
- Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
- Jquery Ajax Json ashx 实现前后台数据传输
经过一个多星期的研究,各种查找资料终于自己实现了Jquery Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- Jquery ajax json 不执行success的原因 坑爹
最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...
- jQuery +ajax +json+实现分页
正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
随机推荐
- Update(Stage4)：spark_rdd算子：第2节 RDD_action算子_分区_缓存：算子和分区
一.reduce和reduceByKey: 二.:RDD 的算子总结 RDD 的算子大部分都会生成一些专用的 RDD map, flatMap, filter 等算子会生成 MapPartitions ...
- 在自定义的widget中引入图表后，运行时出现TypeError #1009错误
本人网上查找了很多资料,其中大部分都是关于Flash中的动画效果问题,与这里的问题关系型不太大.故把问题的解决方法写在这里,与人方便,与己方便. 方法一: 1.在自定义的widget中添加如下两个方法 ...
- html js中的引号
content = "<a class='btn' href='javascript:void(0)' onclick='change('orders/orderTail.do?ode ...
- Centos610无桌面安装Docker-内核升级
1.查看当前操作系统和系统内核 (此处只需要注意一项centos6的docker源只有64位的,x86_64,32位的直接换系统吧) 查看当前内核版本uname -r 2.6.32-754.el6.x ...
- linux磁盘空间挂载
(1)查看磁盘空间 df -hl (3)查看硬盘及分区信息 fdisk -l (4)格式化新分区 mkfs.ext3 /dev/xvdb (5)将磁盘挂载在/www/wwwroot/default目录 ...
- 乒乓球（0）<P2003_1>
乒乓球(table.cpp/c/pas) [问题背景]国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应 ...
- 新手如何配置 Chromedriver 环境变量
有一个不错的链接:https://blog.csdn.net/qq_41429288/article/details/80472064
- C#的 IComparable 和 IComparer接口及ComparableTo方法的 区别（非常重要）
(1)https://blog.csdn.net/ios99999/article/details/77800819 C# IComparable 和 IComparer 区别 (2)https:// ...
- flex布局（非常重要）
首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写.故其取值可以考虑以下情况: flex 的默认值是以上三个属性值的组合.假设以上三个属性同样取默认 ...
- mysql path妙用
CREATE TABLE `lc_c_user_path` ( `id` INT ( ) UNSIGNED NOT NULL AUTO_INCREMENT, `user_id` VARCHAR ( ) ...