整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
面代碼試用于jsp, freemarker 因?yàn)橛惺褂玫?${request.contextPath}
html 代碼
<form id="uploadImage" enctype="multipart/form-data" action="${request.contextPath}/re/updateIdCard" method="post"/>
<div class="col-xs-12 col-sm-6">請(qǐng)上傳身份證件 <em>*</em><br/>
<input type="file" name="idCardPath" id="idCardPath" accept="image/*" class="form-control picture-address" onchange="checkImage()" required/>
<input type="button" name="upload" id="upload" class="btn btn-success" style="width:150px;" onclick="doUpload()" value="重新上傳證件" />
<input type="hidden" name="uid" id="uid" value="${re.uid}"/>
<input type="hidden" name="id" id="id" value="${re.id}"/>
<#if re.idCardPath_1??><input type="hidden" name="oriIdCardPath" id="oriIdCardPath" value="${re.idCardPath_1}"/>
<a href="${request.contextPath}${re.idCardPath_1}" target="_blank"><img id="picture" src="${request.contextPath}${re.idCardPath_1}" width="300px" height="400px" alt="點(diǎn)擊查看原圖"/></a></#if>
</div>
</form>
javascript
function doUpload(){
if(document.getElementById('idCardPath').value==""){
alert("請(qǐng)選擇證件照片；");
return false;
}
var fileSize=document.getElementById('idCardPath').files[0]; //獲得文件大小；
if(fileSize.size > 1048576 ){ //1*1024*1024
alert("證件照片過(guò)大，請(qǐng)小于1M");
return false;
}
var formData=new FormData($("#uploadImage")[0]);
$.ajax({
url:"${request.contextPath}/re/updateIdCard",
type:"POST",
data:formData,
async:false,
cache:false,
contentType:false,
processData:false,
success:function(data){
if(data.success){
//alert( data.resultMsg);
var path=data.resultMsg;
document.getElementById('picture').src="${request.contextPath}"+path;
}else{
alert(data.resultMsg);
}
},
error:function(returndata){
alert("error:"+returndata);
}
});
}
下面為spring boot后臺(tái) controller 代碼
Query的ajax請(qǐng)求
因?yàn)槭前l(fā)送 ajax 請(qǐng)求，不是操作DOM
不需要依賴選擇器去獲取到元素
他的使用是直接依賴 jQuuery 或者 $ 變量來(lái)使用
語(yǔ)法：$.ajax( { 本次發(fā)送ajax的配置項(xiàng) } )
配置項(xiàng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$.ajax({
url:'haha.php',
success:function(res){
//res 接受的就是后端給回的相應(yīng)結(jié)果
console.log(res)
},
error:function(){
console.log('請(qǐng)求失敗')
}
})
</script>
</body>
</html>
以上就是jQuery的ajax請(qǐng)求了
、跨域問(wèn)題的來(lái)源
瀏覽器跨域處理原由：瀏覽器安全防護(hù)的“同源政策”影響。
關(guān)于什么是“同源政策”，可以看這邊文章，講解比較詳細(xì)易懂https://blog.csdn.net/dreamcatcher1314/article/details/78652884
跨域請(qǐng)求的限制主要是針對(duì)前端，Java后端發(fā)送Http請(qǐng)求是不存在跨域的問(wèn)題的，所以通過(guò)后端發(fā)送Http跨域請(qǐng)求也是解決跨域的一種方式。而這里我會(huì)詳細(xì)介紹前后端結(jié)合的幾種跨域解決方案
二、跨域請(qǐng)求解決方案
1.Jsonp跨域
Jsonp是目前使用比較廣泛的跨域解決方案，瀏覽器兼容比較好，但是只能支持Get請(qǐng)求方式。
Jsonp的實(shí)現(xiàn)原理：在同源政策的影響下，Ajax請(qǐng)求不能直接跨域，但script、iframe、img等html標(biāo)簽的src屬性是不受同源政策的影響，直接可以跨域請(qǐng)求的。
$.getJSON("http://item.yangguangqicai.com/product_big/deleteAllFoot/"+userId+"?callback=?",function(data){
});@RequestMapping(value="/getFootprint/{userId}", method=RequestMethod.GET, produces="text/html;charset=UTF-8")
@ResponseBody
public String getFootprint(@PathVariable("userId") int userId,
@RequestParam("callback") String callback) {
String backJson;
try {
backJson=prodBigCustomerApi.getFootprint(userId);
} catch (Exception e) {
backJson="";
logUtil.writeLog("error", "調(diào)用獲取商品瀏覽記錄異常", e);
}
return callback + "(" + backJson + ")";
} $.ajax({
type: "Get",
url: apiHead + "/api/ShoppingCart/?" + Math.random(),
data: parmModel,
dataType: 'jsonp',
success: function (resultflag, textStatus) {
if (parseInt(resultflag) > 0) { //js, 刪除選中的一項(xiàng)
var par=$(obj).parent().parent().parent();
var currprice=parseFloat((productPrice=="")?0:productPrice);
if(productPrice==987123){//價(jià)格待議型
currprice=0;
}
var _totalPrice=$("#span_totalprice").text();
var totalprice=parseFloat(_totalPrice) - currprice*parseFloat(quantity);
if($(obj).parents("table").find("tr").length==1){
clearCart1();
}else{
par.remove();
var rowcount=parseInt($("#cartProductCount").text()) - 1; //重新計(jì)算數(shù)量
$("#cartProductCount").text(rowcount);
$("#span_count").text(rowcount);
$("#span_totalprice").text("￥"+totalprice.toFixed(2)); //重新算總價(jià)
}
}
//刷新上方購(gòu)物車
//reloadCart();
reloadRightCart();
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
}
});2.Cross
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
