一个问题:就是引入1.4版本,为了增加一个jqprint这个 轻量级页面打印插件。但beforeSend的设置就不正常了!
chrome显示的是:
网上查了不少资料,学习了一下Http请求的知识。是相关于ContentType的原因。
??问题是,也不明白为什么1.4版本就一定要contentType:'application/json',这样设置
相关文章:
http://www.cnblogs.com/softidea/p/5745369.html 四种常见的 POST 提交数据方式--good
http://www.cnblogs.com/BenAndWang/p/5566530.html 关于json与 Request Header的Content-Type一些关系。
下面是一段自己写的很简单的实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.jqprint-0.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/list.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>数据列表!</title>
<script type="text/javascript">
window.onload = function(){
btn = document.getElementById('search'),/* 查询的按钮 */
window.Search(btn);
}
function print(){
$("#ddd").jqprint({
debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
});
}
var Search = function() {
var date = new Date();
$('#time').html(date);
btn.onclick = function(){
$.ajax({
type: "POST",
url: 'http://localhost:8891/ServiceBaseController/Cases/list',
beforeSend: function (xhr) {
xhr.setRequestHeader("Content-Type","application/json");
},
// contentType:'application/json',
data:JSON.stringify({
"data": {},
"limit": "15",
"page": "1",
"uid": "string"}),
dataType: "json",
success: function(data){
$("#list").find('tbody').empty();
var listHtml = '';
//循环取json中的数据,并呈现在列表中 JSON.parse(json)
$.each(data.data, function(index, obj) {
listHtml += '<tr>';
listHtml += '<td>' + obj.areaText
+ '</td>';
listHtml += '<td>' + obj.createDate
+ '</td>';
listHtml += '<td>' + obj.status
+ '</th>';
listHtml += '</tr>';
}) ;
$("#list").find('tbody').append(listHtml);
}
});
}
}
</script>
</head>
<body>
<form >
<br /><br />
<input type="button" id="search" value="查询" />
<input type="button" οnclick="print()" value="打印"/>
<input type="button" id="search" value="预览" />
<br /><br />
<div id="ddd">
<table width="100%" id="list" class="table table-bordered" style="border:1px solid #000;">
<h2>各交警大队统计表</h2>
<font size="3">统计时间:</font><span id="time"></span>
<thead>
<tr >
<th class="text-center">交警大队</th>
<th class="text-center">交警中队</th>
<th class="text-center">案件总数</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
实现: