十八 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. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
随机推荐
- 洛谷P1086花生采摘（简单模拟）
题目描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!――熊字”. 鲁宾逊先生和多多都很开心,因为花生正是他 ...
- ➡️➡️➡️IELTS Listening
目录 src numbers and letters src https://ielts-simon.com/ielts-help-and-english-pr/ielts-listening/ nu ...
- Educational Codeforces Round 77 (Rated for Div. 2) - D. A Game with Traps(二分)
题意:$m$个士兵,每个士兵都有一个灵敏度$a[i]$,起点为$0$,终点为$n + 1$,在路上有$k$个陷阱,每个陷阱有三个属性$l[i],r[i],d[i]$,$l[i]$表示陷阱的位置,如果你 ...
- 电子书及阅读器Demo
电子书阅读器(Kindle,电子纸技术.LCD.电子墨水技术等: 亚马逊/当当网站) 电子书产业可分5大环节:内容供应商.数字格式制作商.内容流通服务平台.传输平台以及终端阅读器产品. 全球电子书市 ...
- 十四、制作优美的div弹框
功能描述:确认[调整按钮]弹出精美div弹框 1.jsp页面:perfectAlertDiv.jsp <%@ page contentType="text/html;charset=U ...
- Jenkins 定时备份插件 ThinBackup
需求 公司的整个测试环境正式环境打包都是用的同一个Jenkins, 该Jenkins是搭建在内部的一台机器上,之前有一台机器的硬盘出了问题,为了安全起见,我们决定备份 Jenkins 的配置和数据. ...
- ERROR: but there is no YARN_RESOURCEMANAGER_USER defined. Aborting operation.
将start-dfs.sh,stop-dfs.sh两个文件顶部添加以下参数 HDFS_NAMENODE_USER=root HDFS_DATANODE_USER=root HDFS_SECONDARY ...
- 【快学Docker】Docker镜像相关操作
前言 镜像是Docker的三大核心概念之一(另外两个分别是:容器和仓库). Docker运行容器前需要本地存在镜像,如果本地不存在镜像,Docker则会尝试从远端仓库拉去镜像.镜像是Docker一大核 ...
- Vue——解决报错 Computed property "****" was assigned to but it has no setter.
在最近的项目中遇到了如下的警告信息: [Vue warn]: Computed property " currentStep" was assigned to but it has ...
- 3_07_MSSQL课程_Ado.Net_委托、事件
委托和事件的区别? (1)委托是一个类. 事件是一个委托类型的实列. (2)委托可以在定义委托实列的类的外部触发执行.(不安全) 事件只能能在定义它的类的内部触发执行.(安全),类外部只能注册事件的响 ...