1. 程式人生 > >jQuery中使用$.ajax跨域請求Servlet資料的例項

jQuery中使用$.ajax跨域請求Servlet資料的例項

一、客戶端程式碼

客戶端執行地址:http://127.0.0.1:8020/Hungry_Project2/index.html,服務端地址為http://localhost:8080/HungryServer/GetAllTakeOutfoods,所以必須跨域請求。參考文章:http://blog.csdn.net/fullstackchenzf/article/details/68061584。

  其中dataType:'jsonp'和jsonp:'callback'是必須要配的值,表示是跨域請求資料,GetAllTakeOutfoods是一個用Java編寫的Servlet。

   <script>
$(function(){
$.ajax({
type:"get",
url:"http://localhost:8080/HungryServer/GetAllTakeOutfoods",
async:true,
dataType:'jsonp',
jsonp:'callback',
success:function(data){
$.each(data, function(index,dom) {
//alert(dom['fName']);
var div=$("<div class='row'><div class='col-xs-5'><div style='margin-left: 15px;'><img src='img/"+dom['fImage']+"' class='img-rounded'/></div></div><div class='col-xs-7'><div style='margin-left: 15px;'><b>"+dom['fName']+"</b><span style='color: #35B3E4;'>&nbsp;&nbsp;&nbsp;來一份</span><br/>"+dom['fDescription']+"<br/><b>&yen;"+dom['fPrice']+"元</b></div></div></div><hr/>");
$("#content").append(div);
});
}
});
})
</script>

二、服務端

GetAllTakeOutfoods具體程式碼如下:

package cn.com.bochy.hungry.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import cn.com.bochy.hungry.biz.ITakeout_foodBiz;
import cn.com.bochy.hungry.biz.impl.Takeout_foodBizImpl;
import cn.com.bochy.hungry.entity.Takeout_food;
public class GetAllTakeOutfoods extends HttpServlet {
private static final long serialVersionUID = 1L;
ITakeout_foodBiz biz=new Takeout_foodBizImpl();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
      String c=request.getParameter("callback");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
     List<Takeout_food> lis=biz.getAlltakeoutFoods();
    JSONArray json=JSONArray.fromObject(lis);
    out.print(c+"("+json+")");
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
 doGet(request, response);
}
}

參考文章:http://blog.csdn.net/fullstackchenzf/article/details/68061584

相關推薦

jQuery使用$.ajax請求Servlet資料例項

一、客戶端程式碼 客戶端執行地址:http://127.0.0.1:8020/Hungry_Project2/index.html,服務端地址為http://localhost:8080/HungryServer/GetAllTakeOutfoods,所以必須跨域請求。參考

jQuery使用ajax請求獲取數據

自動生成 pac 異步 部分 pap class 附加 activex 方便 jQuery使用ajax跨域請求獲取數據 跨域是我在日常面試中經常會問到的問題,這詞在前端界出現的頻率不低,主要原因還是由於安全限制(同源策略, 即JavaScript或Cookie只能訪

JQueryAjax請求的解決方式

        今天在專案中須要做遠端資料載入並渲染頁面,直到開發階段才意識到ajax跨域請求的問題,隱約記得Jquery有提過一個ajax跨域請求的解決方式,於是即刻翻出Jquery的API出來研究,發現JQuery對於Aja

ajax請求jsp資料

最近的開發中,應工作需要,把java程式碼在了jsp上,而且還需要通過ajax跨域請求這個方法,並且返回資料。遇到了跨域請求 以及contentType錯誤,我把我的程式碼貼出,供大家參考。 html頁面使用jsonp方式跨域請求(注意:請求的網址?callb

JQueryAjax請求的解決方案(續)

在上篇博文中http://blog.csdn.net/zhouschina/article/details/41721505使用jsonp的方法解決跨域訪問問題。那麼讓我們瞭解一下Jsonp跨域的原理: jsonp的最基本的原理是:動態新增一個<script>標

利用原生js實現ajax請求資料

首先,頁面中不需要引入任何的檔案。 1、前臺html頁面 <script> //定義一個ajax var $ = { ajax:function(option){ var url = option.url; var ca

ie9 ajax 請求不了 提交為空 jquery-ajaxtransport-xdomainrequest

本問出自: http://blog.csdn.net/wyk304443164 幾種方式: 可以手動修改ie9的允許跨域訪問(不實際) 使用jquery-ajaxtransport-xdomainrequest api這邊 h

前後端分離——使用Ajax請求資料並分頁展示

前後端分離的意思是,前後端只通過 JSON 來交流,元件化、工程化不需要依賴後端去實現: 下面以程式碼來講解使用Ajax跨域請求後端資料並分頁展示在前臺中:  後端程式碼如下:   Dao層:資料訪問層,實現對資料表的Select(查詢),Insert(插入),Update(更新),Delete(刪除)等操作

ajax請求資料的解決方案

ajax跨域請求資料常用的兩種方式 首先得明白,為什麼會存在跨域請求資料的問題。在實際大的專案開發中,資料並不全是來源於本機的伺服器,很多時候要進行跨域請求資料。而js的同源策略是不允許跨域請求資料的,這樣就造成了一種矛盾。於是乎,聰明的開發人員想出了一

前端:jquery ajax 請求問題解決彙總

一般情況下跨域分兩種請求方式:post、get; 1、post請求解決方式: spring cloud 專案下: 後臺demo: @CrossOrigin(allowCredentials = "true", allowedHeaders = "*", methods = {Requ

利用JQuery實現更簡單的Ajax請求

<html><head><title>JQuery學習</title><script src="jquery-1.2.6.min.js" type="text/javascript"></script><script type="t

jQuery ajax請求的解決方法

由於JS同源策略的影響,因此js只能訪問同域名下的文件。因此要實現跨域,一般有以下幾個方法: 一、處理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支援 只需要在服務端

JQuery Jsonp解決ajax請求

1、同源策略 瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指,域名,協議,埠相同。不同源的客戶端指令碼(javascript、ActionScript)在沒明確授權的情況下,不能讀寫對方的資源。 2、JSONP

Ajax請求——jsonp獲取json資料

JSONP(JSON with Padding)是JSON的一種“使用模式”,可用於解決主流瀏覽器的跨域資料訪問的問題; 例如在同一個系統中,我們進行了分散式分域名的部署,但是在這個域裡面,我們需要通

NodeJ node.js Jquery Ajax 請求

creat set bubuko 位置 spa access com ces 通過 Jquery + Ajax 跨域請求 說白了就是前臺請求ajax數據(JSON)但是請求的數據不在本地的絕對路徑下,接口數據 是沒有這個安全性的我對外公開的接口數據,只要你找到接口你就可以

AJAX 請求 - JSONP獲取JSON數據

tel -name 跨域訪問 服務器 utf pen domain nbsp XML 1、什麽是JSONP?   JSONP(JSON with Padding)是一個非官方的協議,它允許在服務器端集成Script tags返回至客戶端,通過javascript callb

AJAX請求數據

一個 回來 函數 請求 我們 才會 但是 註意點 攔截 由於瀏覽器的同源策略 ajax請求不可以接收到請求響應回來的數據   請求數據需要調用瀏覽器的內置構造函數 XMLHttpRequest() 進行 實例對象   var xhr = new XMLHttpRequ

Ajax請求COOKIE無法帶上的解決辦法

tar function jquery question logs request cross xmlhttp quest 本文參考https://stackoverflow.com/questions/12840410/how-to-get-a-cookie-from-a

ajax請求

在服務器 回調 www 般的 cti lba style s函數 nbsp 跨域請求 首先先了解什麽是跨域? 瀏覽器同源策略:規定瀏覽器只能訪問同源的資源,不能訪問對方的資源。(非授權情況下) 域相同和不同域 滿足同域的條件:同協議 同域名 同端口 如http://www.

java Ajax請求COOKIE無法帶上的解決辦法

coo $.ajax test style dem log json bsp ros 1.web.xml加入以下節點,,一定放在第一個filter <!--目錄下所有文件可以跨域Begin--> <filter> <filter-