1. 程式人生 > >Java為後臺,前端ajax訪問後臺請求成功但是進入不到success,反而進入error

Java為後臺,前端ajax訪問後臺請求成功但是進入不到success,反而進入error

html:

$.ajax({
type:"POST",
url:"http://192.168.43.155:8080/Video/SelectAllUserServlet",
async:true,
data:{
},
error:function(){
alert("asd");
},
success:function(result){
alert("成功");
var tbody = $("#user_all").html();
var json = $.parseJSON(result);
$.each(json, function(i,o) {
// var videosName = o.videosName;
// var videosId = o.videosId;
// var videosAddress = o.videosAddress;
tbody = tbody + ' <tr>'+
' <td>Jacob</td>'+
'<td>53275531</td>'+
'<td>12 May 2017</td>'+
'<td>'+
'<button class="btn btn-gradient-success btn-rounded" type="button">修改</button>'+
'<button class="btn btn-gradient-warning btn-rounded" type="button">刪除</button>'+
'</td>'+
'</tr>';
});
$("#user_all").html(tbody);
$("#user_all").trigger("create");
}
});

 

 

後臺:

response.setContentType("text/html;charset=UTF-8");
UserDao userDao = new UserDao();

ArrayList al = new ArrayList();
al = userDao.selectRecord();

String jMark = "";
PrintWriter ps = response.getWriter();
jMark = JSONArray.toJSONString(al);
System.out.println(jMark);
ps.write(jMark);
ps.flush();
ps.close();

 

 

 

通過瀏覽器檢視,發現狀態碼是200,後臺也有反應,但是就是不進入success,查了很久,有說前後臺傳輸格式對不上,要更改dataType;還有說json格式不正確,所以導致ajax不認;

JSON格式總結下,詳細的去json.org 檢視。
  1)鍵名稱:用雙引號 括起
  2)字串:用使用雙引號 括起
  3)數字,布林型別不需要 使用雙引號 括起

 

最後我在瀏覽器裡找到了一條錯誤:

No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax

看樣子應該就是他了!!!

解決方式:

1、在java伺服器端的filter或者servlet裡面新增

response.setHeader("Access-Control-Allow-Origin", "*");

2、如果請求的url是aspx頁面,則需要在aspx頁面中新增程式碼

Response.AddHeader("Access-Control-Allow-Origin", "*");

3、如果請求的url是PHP頁面

header("Access-Control-Allow-Origin: *");

4、如果請求的url是靜態的html頁面,則需要在頁面中新增meta標籤程式碼:

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

“Access-Control-Allow-Origin”表示允許跨域訪問,“*”表示允許所有來源進行跨域訪問,這裡也可以替換為特定的域名或ip。
很顯然,這種方式對非網站擁有人員來說是不能做到的。而且此種方式很容易受到CSRF攻擊。

如果還不行,就把這些都加上吧

// 指定允許其他域名訪問
header('Access-Control-Allow-Origin:*');
// 響應型別
header('Access-Control-Allow-Methods:POST');
// 響應頭設定
header('Access-Control-Allow-Headers:x-requested-with,content-type');