Jquery异步加载应用
工程结构：
JSP
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var PATH = "<%=path%>";
</script>
<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/js/dialog/jquery.msgbox.js"></script>
<link rel=stylesheet type="text/css" href="<%=path%>/js/dialog/skins/jquery.msgbox.css">
<script type="text/javascript" src="<%=path%>/js/test.js"></script>
</head>
<body>
This is my JSP page.
<input type="button" onclick="searchGoods()" value=" 确定 " />
<input type="button" onclick="setPresented('111','222')" value=" 取消 " /><br>
<div id="goodsRadioListDiv"></div>
</body>
</html>
应用一
1. Action中
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public void ajaxSearchGoods() {
try {
......
List<Goods> goodsList = goodsService.selectIsNullTdkGoodsList(goods);
JSONArray json = new JSONArray();
JSONObject j = null;
for (Goods g : goodsList) {
j = new JSONObject();
j.put("goodsId", g.getGoodsId());
j.put("goodsName", g.getGoodsName());
json.add(j);
}
//getResponse().getWriter().print(json);
HttpServletResponse response = getResponse();
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(json);
} catch (IOException e) {
e.printStackTrace();
}
}
2. JS请求方法
function searchGoods() {
var goodsRadioListDiv = document.getElementById("goodsRadioList");
$.ajax({
type:"post",
url:basePath+"/tdk/ajaxSearchGoods_tdk.action",
data:"catId="+ $("#catId").val(),
async: false,// ajax同步
dataType:'json', // 接受数据格式
success: function(jsonText){
var len = jsonText.length;
if (len == 0) {
return;
}
$(goodsRadioListDiv).html("");
var text = "";
text += "<hr/>";
for(var i=0;i<len;i++){
text += "<input type='radio' name='goodsId' value='"+ jsonText[i].goodsId +"'> "+ jsonText[i].goodsName +"<br/>";
}
$(goodsRadioListDiv).html(text);
}
});
}
应用二
//解决JS没有刷新页面的问题
function deleteSupplier(supplierId) {
if (!confirm("确定要删除吗？")) {
return;
}
var url = window.location.href;
$.ajax({
type: "POST",
url: basePath + '/supplier/deleteBatch_supplier.action',
data: 'supplierId='+ supplierId,
async: false,//ajax同步
dataType:'text', //接受数据格式
success: function(msg){
if('1' == msg){
setTimeout(doRefreshPage(url),1000);
}else{
alert("删除失败!");
}
}
});
}
function doRefreshPage(url) {
alert("删除成功!");
document.location = url;
}
----------------------------------------------------------------------
function deleteSupplier(supplierId) {
$.msgbox({
height: 150,
width: 250,
content: {
type: 'confirm',
content: '确定要删除吗？'
},
onClose: function(v) {
if (v) {
var url = window.location.href;
$.ajax({
type: "POST",
url: basePath + '/supplier/deleteBatch_supplier.action',
data: 'supplierId='+ supplierId,
async: false,//ajax同步
dataType:'text', //接受数据格式
success: function(msg){
if('1' == msg){
alert("删除成功!");
parent.location.reload();
}else{
alert("删除失败!");
}
}
});
}
}
});
}
JSP
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var PATH = "<%=path%>";
</script>
<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/js/dialog/jquery.msgbox.js"></script>
<link rel=stylesheet type="text/css" href="<%=path%>/js/dialog/skins/jquery.msgbox.css">
<script type="text/javascript" src="<%=path%>/js/test.js"></script>
</head>
<body>
This is my JSP page.
<input type="button" onclick="searchGoods()" value=" 确定 " />
<input type="button" onclick="setPresented('111','222')" value=" 取消 " /><br>
<div id="goodsRadioListDiv"></div>
</body>
</html>
应用一
1. Action中
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public void ajaxSearchGoods() {
try {
......
List<Goods> goodsList = goodsService.selectIsNullTdkGoodsList(goods);
JSONArray json = new JSONArray();
JSONObject j = null;
for (Goods g : goodsList) {
j = new JSONObject();
j.put("goodsId", g.getGoodsId());
j.put("goodsName", g.getGoodsName());
json.add(j);
}
//getResponse().getWriter().print(json);
HttpServletResponse response = getResponse();
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(json);
} catch (IOException e) {
e.printStackTrace();
}
}
2. JS请求方法
function searchGoods() {
var goodsRadioListDiv = document.getElementById("goodsRadioList");
$.ajax({
type:"post",
url:basePath+"/tdk/ajaxSearchGoods_tdk.action",
data:"catId="+ $("#catId").val(),
async: false,// ajax同步
dataType:'json', // 接受数据格式
success: function(jsonText){
var len = jsonText.length;
if (len == 0) {
return;
}
$(goodsRadioListDiv).html("");
var text = "";
text += "<hr/>";
for(var i=0;i<len;i++){
text += "<input type='radio' name='goodsId' value='"+ jsonText[i].goodsId +"'> "+ jsonText[i].goodsName +"<br/>";
}
$(goodsRadioListDiv).html(text);
}
});
}
应用二
//解决JS没有刷新页面的问题
function deleteSupplier(supplierId) {
if (!confirm("确定要删除吗？")) {
return;
}
var url = window.location.href;
$.ajax({
type: "POST",
url: basePath + '/supplier/deleteBatch_supplier.action',
data: 'supplierId='+ supplierId,
async: false,//ajax同步
dataType:'text', //接受数据格式
success: function(msg){
if('1' == msg){
setTimeout(doRefreshPage(url),1000);
}else{
alert("删除失败!");
}
}
});
}
function doRefreshPage(url) {
alert("删除成功!");
document.location = url;
}
----------------------------------------------------------------------
function deleteSupplier(supplierId) {
$.msgbox({
height: 150,
width: 250,
content: {
type: 'confirm',
content: '确定要删除吗？'
},
onClose: function(v) {
if (v) {
var url = window.location.href;
$.ajax({
type: "POST",
url: basePath + '/supplier/deleteBatch_supplier.action',
data: 'supplierId='+ supplierId,
async: false,//ajax同步
dataType:'text', //接受数据格式
success: function(msg){
if('1' == msg){
alert("删除成功!");
parent.location.reload();
}else{
alert("删除失败!");
}
}
});
}
}
});
}