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>