1.前端获取输入框内容的两种小思想
1.1 使用jQuery插件采用给输入框加入标签标识id号的方式进行定位。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
function sendAjax(val) {
alert($('#acc_no').val());
}
</script>
</head>
<body>
<form >
账号:<input type="text" id="acc_no" onblur="sendAjax()">
</form>
</body>1.2 使用传参的思想
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" >
function sendAjax(val) {
alert(val);
}
</script>
</head>
<body>
<form >
账号:<input type="text" onblur="sendAjax(this.value)">
</form>
</body>1.3不使用jQuery插件使用document属性。
2.ajax中传参问题
2.1get传参
url 后面通过问号 拼接参数 如： login.do?a=va&b=vb
例子：
再发送ajax函数中
function sendAjax(val) {
//alert($('#acc_no').val());
//alert(val);
var xhr = createXHR();
//准备发送请求
xhr.open('get', 'CheckAccNo.do?acc_no='+val, true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var text = xhr.responseText;
$('#sp1').html(text);
}
};
//发送请求
xhr.send(null);
} servlet中
response.setContentType("text/html;charset=utf-8");
String acc_no = request.getParameter("acc_no");
PrintWriter pWriter = response.getWriter();
if ("abc".equals(acc_no)) {
pWriter.write("账号可用");
} else {
pWriter.write("账号不可用");
}
pWriter.close();
2.2post传参
url 后面通过问号 拼接参数 如: login.do?a=va&b=vb
更推荐 使用 send 进行参数传递 send传递时需要设置请求头 来对数据进行编码
xhr.open('post', 'CheckAccNo.do', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('acc_no='+val); 3.AJAX + JSON (AJAJ)
3.1 什么JSON
JavaScript Object Notation JS对象通知类型
它是JS中的一种 按照 {"key":value,"key":value} 格式
3.2 JSON 字符串
'{"key":value,"key":value}'
java 中的JSON字符串
"{\"key\":value,\"key\":value}"
java 中 JSON对象数组字符串
"[{\"key\":value,\"key\":value},{\"key\":value,\"key\":value},
{\"key\":value,\"key\":value}]"
3.3 在java语言中如何把 JAVA对象 转换成JSON字符串
XdlUser ----
List<XdlUser> ----
借助第三方jar包 把java对象转换成 JSON字符串
JSONObject.fromObject(java对象).toString();
JSON对象数组转JSON字符串
JSONArray.fromObject(java对象).toString();
3.4 JS 中如何把JSON字符串 转换成JSON对象
为了方便提取字符串中的数据 要把 JSON字符串转换成 JSON对象
eval('(' + JSON字符串 + ')')
JSON.parse(JSON字符串);
3.5 写一个servlet 可以把 银行账户对象的信息 以 JSON字符串返回 。
写一个jsp 页面 页面上有一个按钮 和 标签元素 当点击按钮时 发送
ajax请求 把返回数据的账号 显示到 标签元素上。
@WebServlet("/account.do")
public class XdlBankAccountServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//使用随机数构建一个银行账户对象
Random random = new Random();
response.setContentType("text/html;charset=utf-8");
XdlBankAccount account = new XdlBankAccount(random.nextInt(100),
"李"+random.nextInt(100),
""+random.nextInt(1000), random.nextInt()*165.3);
//使用第三方jar包把account变成json字符串
String jsonStr = JSONObject.fromObject(account).toString();
System.out.println("jsonStr=" + jsonStr);
PrintWriter pw = response.getWriter();
pw.write(jsonStr);
pw.close();
}
}//jsp中ajax发送函数。主要注意json字符串转成json对象！！！！
function sendAjax2() {
//alert($('#acc_no').val());
//alert(val);
var xhr = createXHR();
//准备发送请求
xhr.open('post', 'account.do', true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var text = xhr.responseText;
//将json字符串转换成JSON对象
text = JSON.parse(text);
$('#sp2').html(text.acc_no);
}
};
//发送请求
xhr.send(null);
}
//标签元素（返回一个元素）
<input type="button" onclick="sendAjax2()" value="点击进行ajax请求">
<span id="sp2"></span><br>
3.6 写一个servlet 可以把 银行账户对象的列表信息 以 JSON字符串返回 。
写一个jsp 页面 页面上有一个按钮 和 table元素 当点击按钮时 发送
ajax请求 把返回数据显示到表格中。
这个例子与前面那个例子的不同之处在于，上一个操作的数据是单个的，这个是一个数组。
要注意的小坑是：1.servlet中将JSON对象数组转JSON字符串 的操作。2.如何把每个JSON对象变成表格的一行
3.如何清空原来的数据。（jquery的选择器）
@WebServlet("/accountlist.do")
public class XdlBankAccountListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
List<XdlBankAccount> accounts = new ArrayList<XdlBankAccount>();
Random random = new Random();
for (int i = 1; i < 10; i++) {
XdlBankAccount account = new XdlBankAccount(random.nextInt(1000), "acc_"+random.nextInt(1000),
"123", random.nextInt(1000)*1.85);
accounts.add(account);
}
//将JSON对象数组转JSON字符串
String accountliststr = JSONArray.fromObject(accounts).toString();
System.out.println(accountliststr);
PrintWriter pw = response.getWriter();
pw.write(accountliststr);
pw.close();
}
//主要操作的是多个数据
function sendAJAX3(){
var xhr = createXHR();
xhr.open('post', 'accountlist.do', true);
//注册数据处理函数
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200) {
//清空原来的数据
$("#datas tr:gt(0)").remove();
//获取返回的JSON字符串
var text = xhr.responseText;
//把返回的JSON对象数组字符串转换JSON对象数组
var objs = JSON.parse(text);
//把每个json对象 变成表格的一行
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
var trStr = "<tr><td>"+obj.id+"</td><td>"+obj.acc_no+"</td><td>"+
obj.acc_password+"</td><td>"+obj.money+"</td></tr>";
//追加到表格对象上
$("#datas").append($(trStr));
}
}
};
//发送
xhr.send(null);
}<form >
<input type="button" onclick="sendAJAX3()" value="点击进行ajax请求">
<table id="datas">
<tr><td>ID</td><td>ACC_NO</td>
<td>ACC_PASSWORD</td><td>MONEY</td></tr>
</table>
</form>4.ajax 中的常见的问题
4.1 乱码问题
get方式在tomcat8 中虽然没有乱码问题 但是 IE浏览器地址栏不允许有中文
如果传递中文参数 则需要转码 encodeURI(中文参数)
post方式的乱码 和之前的处理方式 相同
request.setCharacterEncoding("utf-8");
4.2 缓存问题
4.2.1 出现的原因
不同的浏览器 对同一个get请求 处理的方式不同,谷歌和火狐这些浏览器 会重新的
发送请求。IE 浏览器不会再次发送这个请求 而是把上次的结果直接返回使用。
如果返回的数据是动态的 则IE浏览器会出现问题。
4.2.2 如何解决
把 get 换成 post
可以通过拼接参数的方式 来改变url
xhr.open('get','account.do?r='+Math.random(),true);
xhr.open('get','account.do?r='+new Date().getTime(),true);
5. jquery 对ajax 的支持
5.1 做了哪些支持
ajax请求对象的创建发送和响应都做了相应的封装同时还考虑了浏览器的兼容问题。
5.2 jquery中对ajax支持的函数
$.ajax({key:value,key:value,key:value});
例子：一个简单的函数完成了使用jquery发送ajax请求
function sendRandom(){
var name = $("#name").val();
$.ajax({
url:'randomvalue.do',
type:'post',
cache:false,
success:function(txt){
$("#sp1").html(txt);
},
data:{name:name},
error:function(){
$("#sp1").html('请求失败');
}
});
} ajax 函数中的参数
url: 请求的地址 string 类型
type: 请求的方式 string 类型
success:数据处理函数 直接写参数 代表返回的数据
cache: 是否缓存 默认是true 写成false 不缓存
async:是否异步 默认是 true
data:{key:value,key:value} 也可以使用 'name=' + name 推荐使用前面的方式
error: 错误处理函数
dataType: 默认数据返回文本 如果是json 则需要指定成 "json"
关于dataType的例子：单个数据的操作
记住再servlet中：String jsonStr = JSONObject.fromObject(account).toString()
servlet书写与上面XdlBankAccountServlet相同
<script type="text/javascript">
function sendAjax() {
$.ajax({
url:"account.do",
type:"post",
success:function(obj){
$("#sp1").html(obj.acc_no);
},
dataType:"json"
});
}
</script>操作多个json对象
servlet书写与上面XdlBankAccountListServlet相同，表格表单同上。
<script type="text/javascript">
function sendAJAX3() {
$.ajax({
url:"accountlist.do",
type:"post",
success:function(objs){
//清空原来的数据
$("#datas tr:gt(0)").remove();
//把每个json对象 变成表格的一行
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
var trStr = "<tr><td>"+obj.id+"</td><td>"+obj.acc_no+"</td><td>"+
obj.acc_password+"</td><td>"+obj.money+"</td></tr>";
//追加到表格对象上
$("#datas").append($(trStr));
}
},
dataType:"json"
});
}
</script>5.3jquery 中对ajax 支持的其它函数
$.get(url,data,success,dataType);
$.post(url,data,success,dataType);
$.getJSON(url,data,success);
jquery对象.load(url); 直接发出ajax请求 并把数据放入对应的jquery对象中
可以完成数据的获取并显示 还可以完成页面加载
页面加载三种方式:
1。第一种方式放在<body>标签前面的<script标签中>
$(function(){
$.ajax({
url:"randomvalue.do",
type:"post",
success:function(txt){
$("#sp1").html(txt);
}
});
}); 2.放在<body>标签前面的<script>标签中
$(function(){
$("#sp1").load("randomvalue.do");
});3.放在<body>标签的后面的<script>中
<script type="text/javascript">
$("#sp1").load("randomvalue.do");
</script>
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
