jquery----Ajax使用
基本使用
<script>
//$.ajax的两种使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123},
dataType:"JSON" //服务器返回的参数，更多html、xml、json、script
async:false,//同步请求
success:function(data){
alert(data)
},
//=================== error============
error: function (jqXHR, textStatus, err) {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
// err: 底层通过throw抛出的异常对象，值与错误类型有关
console.log(arguments);
},
//=================== complete============
complete: function (jqXHR, textStatus) {
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态 success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},
//=================== statusCode============
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments); //注意：后端模拟errror方式：HttpResponse.status_code=500
},
'400': function () { }
}
})
})
</script>
关于请求参数
#当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式 (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
function testData() {
$.ajax("/test",{
data:{a:1,b:2}
}
});
localhost/test?a=1&b=2
//------------------------------------------
processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。
//------------------------------------------
如果"Content-Type"="application/json"，发送的数据是对象形式的{},需要在body里面取数据，然后反序列化。如果"Content-Type"="application/x-www-form-urlencoded"，发送的是/index/?name=haiyan&agee=20这样的数据 即 键值对
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据。比如contentType:"application/json"，即向服务器发送一个json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({ a:22,b:33),
contentType:"application/json",
type:"POST",
});
注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
//------------------------------------------
traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
traditional为false会对数据进行深层次迭代；
1、AJAX核心（XMLHttpRequest）
其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。
var xmlHttp = new XMLHttpRequest()；（大多数浏览器都支持DOM2规范）
XML
function createXMLHttpRequest() {
var xmlHttp;
// 适用于大多数浏览器，以及IE7和IE更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e) {
// 适用于IE6
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
// 适用于IE5.5，以及IE更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
使用流程
1、打开与服务器的连接（open）
open(method, url, async)：
- method：请求方式，通常为GET或POST；
- url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；
- async：这个参数可以不给，默认值为true，表示异步请求；
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true);
2、发送请求
xmlHttp.send(null);
3、接收服务器的响应（5个状态，4个过程）
当请求发送出去后，服务器端就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。
XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：
- 0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
- 1：请求已开始，open()方法已调用，但还没调用send()方法；
- 2：请求发送完成状态，send()方法已调用；
- 3：开始读取服务器响应；
- 4：读取服务器响应结束。
onreadystatechange事件会在状态为1、2、3、4时引发。
下面代码会被执行四次！对应XMLHttpRequest的四种状态！
xmlHttp.onreadystatechange = function() {
alert('hello');
};
但通常我们只关心最后一种状态，即读取服务器响应结束时，客户端才会做出改变。我们可以通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
alert('hello');
}
};
其实我们还要关心服务器响应的状态码xmlHttp.status是否为200，其服务器响应为404，或500，那么就表示请求失败了。我们可以通过XMLHttpRequest对象的status属性得到服务器的状态码。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
最后，我们还需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在readyState为4时才能获取到！
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
简单版
function AjaxSubmit(){
var xhr = new XMLHttpRequest()
xhr.onreadstatechange = function(){
if( xhr.readState== 4 ) {
console.log(xhr.responseText)
}
}
xhr.open("GET","url") //xhr.open("GET","/index?name="zy"&pwd="123"")
xhr.send(null)
}
注意事项
如果是post请求：
基于JS的ajax没有Content-Type这个参数了，也就不会默认是urlencode这种形式了，需要我们自己去设置
<1>需要设置请求头：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)； 注意 :form表单会默认这个键值对不设定，Web服务器会忽略请求体的内容。 <2>在发送时可以指定请求体了：xmlHttp.send(“username=yuan&password=123”) 基于jQuery的ajax和form发送的请求，都会默认有Content-Type，默认urlencode，
如果是get请求：
xmlhttp.open("get","/sendAjax/?a=1&b=2");
Ajax解决Csrf问题
前端ajax请求
$.ajax({
type:"PUT", //请求方式为put
dataType:"JSON",
url:'/updata/user/',
data:JSON.stringify(update_data),
success: function (data) {//ajax请求成功后触发的方法
if(data.status){
alert("成功")
} else{
alert("失败")
}
},
})
后端显示数据
if request.method =="PUT":
data = request.body
data = json.loads(str(data,encoding='utf-8'))
print(data)
ret={
'status':True
}
return HttpResponse(json.dumps(ret))
ajax POST请求解决csrf问题
1, 前端 ajax 解决
$.ajax({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
})
2.后端解决
from django.views.decorators.csrf import ensure_csrf_cookie @csrf_exempt def my_view(request):
Ajax异步获取数据添加到表格中
原文：https://www.cnblogs.com/dss1025/p/9455791.html
方式一（服务器返回json数据，浏览器自己解析json数据）
1.html中table中含有tbody
<table class="ui nine column table celled table-result" id="table-result">
<thead>
<tr>
<th>hotelSeq</th>
<th>酒店名称</th>
<th>订单号</th>
<th>联系人手机号</th>
<th>预定时间</th>
<th>userId</th>
<th>cellid</th>
<th>gps定位城市</th>
<th>wifi定位城市</th>
<th>定位距离</th>
</tr>
</thead>
<tbody id="tbody-result">
</tbody>
</table>
2 js方法中 后台查询数据返回jsonArr 。text格式为text[txt[0],txt[1]]。txt[1]中数据为构建表格数据
可以先将表格中的数据清空
$.ajax({
type: 'get',
url: url,
data: {docMainId: mainId},
dataType: "json",
success: function (text) {
var str = "";
var data = text[1];
for ( var i=0;i<data.length;i++) {
str += "<tr>" +
"<td align='center'>" + (i+1) + "</td>" +
"<td style='display: none'>" +" <input type='input' class='tbody1' name='fdDetail_Form["+i+"].fdPlanId' value="+ data[i].fdPlanId +" />" + "</td>"+
"<td >" + " <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdLandmark' value="+data[i].fdLandmark+" />" + "</td>" ;
"<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCashCate' value='尾款'/>" + "</td>";
"<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdReceivables' value="+ data[i].fdReceivables + " />" +"</td>" +
"<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCollected' value=" + data[i].fdCollected + " />" +"</td>" +
if(data[i].fdUnreceivable=='0'||data[i].fdInvoiced=='0'){
str+="<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdThisReturn' value=''/>" +"</td>" +
"</tr>";
}else{
str+= "<td>"+" <input type='input' id='returnId["+i+"]' class='tbody2' name='fdDetail_Form["+i+"].fdThisReturn' value='' onblur='getIndex(this)' /> " +"</td>" +
"</tr>";
}
}
tbody.innerHTML = str;
}
});
}
方式二（服务器返回一个html文本（table），浏览器将table添加到html中）
方式1，服务器返回json
@ResponseBody
@GetMapping()
public JsonResult test(){}
方式2，服务器返回jhtml，需要ajax设置type
@GetMapping()
public String test(){
return "xx"; //直接返回视图
}
html页面
<table class="table el-table table-hover">
<thead id="gridHead">
<tr>
<th>借款人</th>
<th width="180px">借款标题</th>
<th>年利率</th>
<th>金额</th>
<th>还款方式</th>
<th>进度</th>
<th width="80px">操作</th>
</tr>
</thead>
<tbody id="gridBody">
</tbody>
</table>
//用于分页
<div style="text-align: center;" id="page_container">
<ul id="pagination" class="pagination"></ul>
</div>
js
$(function () {
var searchForm = $("#searchForm");
var gridBody = $("#gridBody");
searchForm.ajaxForm(function (data) {
// var slice = data.slice(43); 注意data不能有thymeleaf命名空间,如果有就需要字符串分割,将thymeleaf给剔除掉
console.log(data)
gridBody.hide(); //可能目的是隐藏原来的数据,但是好像没有什么用
gridBody.html(data); //将后台的html数据添加到页面中
gridBody.show(500);
});
/**
* 页面加载就直接发送ajax请求获取数据,将数据添加到table中
*/
searchForm.submit();
}
后台
@PostMapping("invest_list")
public String investList(BidRequestQueryObject qo, Model model) {
if (qo.getBidRequestState() == -1) {
qo.setBidRequestStates(new int[] {BidConst.BIDREQUEST_STATE_BIDDING, BidConst.BIDREQUEST_STATE_PAYING_BACK, BidConst.BIDREQUEST_STATE_COMPLETE_PAY_BACK });
}
model.addAttribute("pageResult", this.bidRequestService.query(qo));
return "invest_list";
}
invest_list
<tr th:each="data:${pageResult.listData}" th:if="${pageResult.listData.size()}>0">
<td>[[${data.createUser.username}]]</td>
<td>[[${data.title}]]</td>
<td class="text-info">[[${data.currentRate}]]%</td>
<td class="text-info">[[${data.bidRequestAmount}]]</td>
<td>[[${data.returnTypeDisplay}]]</td>
<td>
<div class="">
[[${data.persent}]]%
</div>
</td>
<td><a class="btn btn-danger btn-sm"
href="/borrow_info.do?id=${data.id}">查看</a></td>
</tr>
<tr th:if="${pageResult.listData.size()}==0">
<td colspan="7" align="center">
<p class="text-danger">目前没有符合要求的标</p>
</td>
</tr>
<script type="text/javascript" th:inline="javascript">
$(function () {
$("#page_container").empty().append($('<ul id="pagination" class="pagination"></ul>'));
$("#pagination").twbsPagination({
totalPages: [[${pageResult.totalPage}]],
currentPage: [[${pageResult.currentPage}]],
initiateStartPageClick: false,
onPageClick: function (event, page) {
$("#currentPage").val(page);
$("#searchForm").submit();
}
});
});
</script>
