JavaEE-ajax的代碼實(shí)例

明：本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫，學(xué)員有權(quán)匿名，對(duì)文章有最終解釋權(quán)；凱哥學(xué)堂旨在促進(jìn)VIP學(xué)員互相學(xué)習(xí)的基礎(chǔ)上公開(kāi)筆記。

Doget 訪問(wèn):

servlet的代碼如下圖

Jsp 頁(yè)面或者 html 頁(yè)面代碼如下:

瀏覽器發(fā)送之后內(nèi)容如下:

注意: 在以前瀏覽器中有種優(yōu)化功能就是你訪問(wèn)過(guò)的鏈接他會(huì)給你緩存你再去訪問(wèn)的時(shí)候?yàn)g覽器不會(huì)再去請(qǐng)求了他會(huì)直接讀取本地緩存導(dǎo)致你短信發(fā)不出去好點(diǎn)的解決辦法就是在這個(gè)鏈接后面寫個(gè)時(shí)間參數(shù)

Dopost提交

Servlet代碼還是原來(lái)那樣不變就是把doget方法改成了 dopost jsp代碼如下在瀏覽器中運(yùn)行的效果和上圖一樣

文件上傳:

多文件上傳:

如果你想要做好點(diǎn) 就把進(jìn)度條隱藏等他上傳文件的時(shí)候在顯示出來(lái) 在java代碼中判斷一下文件的MD5是否存在!

Web開(kāi)發(fā)中，通過(guò)POST請(qǐng)求將數(shù)據(jù)發(fā)送給服務(wù)器是一種常見(jiàn)的方式。使用jQuery可以輕松地發(fā)送POST請(qǐng)求，這需要使用jQuery的ajax()方法。本文將介紹jQuery如何使用POST請(qǐng)求發(fā)送數(shù)據(jù)，并提供一個(gè)實(shí)際的例子。

使用$.ajax()方法發(fā)送POST請(qǐng)求

使用jQuery的ajax()方法發(fā)送POST請(qǐng)求需要設(shè)置以下屬性：

url：要發(fā)送請(qǐng)求的URL
type：請(qǐng)求類型，這里應(yīng)設(shè)置為POST
dataType：預(yù)期響應(yīng)數(shù)據(jù)類型，可以是JSON、XML或HTML等
data：要發(fā)送的數(shù)據(jù)，可以是一個(gè)JavaScript對(duì)象或字符串

以下是一個(gè)示例代碼：

$.ajax({
  url: 'https://example.com/api',
  type: 'POST',
  dataType: 'json',
  data: {
    name: 'Alice',
    age: 25,
    city: 'New York'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('錯(cuò)誤：' + errorThrown);
  }
});

在上面的示例中，我們向URL為https://example.com/api的API發(fā)送一個(gè)POST請(qǐng)求，并攜帶一個(gè)JavaScript對(duì)象作為數(shù)據(jù)發(fā)送。

當(dāng)API響應(yīng)成功時(shí)，success()回調(diào)函數(shù)將被執(zhí)行，并將響應(yīng)數(shù)據(jù)作為參數(shù)傳遞。當(dāng)API響應(yīng)失敗時(shí)，error()回調(diào)函數(shù)被執(zhí)行，并將HTTP錯(cuò)誤信息作為參數(shù)傳遞。

使用$.post()方法簡(jiǎn)化POST請(qǐng)求

除了使用ajax()方法外，還可以使用jQuery的$.post()方法來(lái)發(fā)送POST請(qǐng)求，如下所示：

$.post('https://example.com/api', {
  name: 'Alice',
  age: 25,
  city: 'New York'
}, function(response) {
  console.log(response);
}, 'json');

使用$.post()方法時(shí)，第一個(gè)參數(shù)是請(qǐng)求URL，第二個(gè)參數(shù)是要發(fā)送的數(shù)據(jù)，第三個(gè)參數(shù)是成功響應(yīng)后的回調(diào)函數(shù)，最后一個(gè)參數(shù)是響應(yīng)數(shù)據(jù)類型。

帶header信息的POST請(qǐng)求

在發(fā)送POST請(qǐng)求時(shí)，有時(shí)需要在請(qǐng)求頭中添加一些信息，例如身份驗(yàn)證令牌或版本信息。可以使用以下代碼在請(qǐng)求中添加標(biāo)頭信息：

$.ajax({
  url: 'https://example.com/api',
  type: 'POST',
  dataType: 'json',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Alice', age: 25 }),
  headers: {
    'Authorization': 'Token xxx',
    'X-API-Version': '1'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('錯(cuò)誤：' + errorThrown);
  }
});

在上面的示例中，我們將headers屬性添加到請(qǐng)求中，并在其中添加了Authorization和X-API-Version標(biāo)頭。

在contentType中傳遞的“application/json”指示我們發(fā)送的數(shù)據(jù)是JSON格式。data屬性使用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換為JSON字符串。

總結(jié)

本文介紹了如何使用jQuery發(fā)送POST請(qǐng)求，并提供了簡(jiǎn)單和帶標(biāo)頭信息的請(qǐng)求的實(shí)際示例。使用jQuery可以方便地向服務(wù)器發(fā)送數(shù)據(jù)，并等待響應(yīng)。在實(shí)際開(kāi)發(fā)中，我們通常會(huì)使用POST請(qǐng)求來(lái)提交表單數(shù)據(jù)、發(fā)送文件或與服務(wù)器進(jìn)行交互。

. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡(jiǎn)寫，ajax一個(gè)前后臺(tái)配合的技術(shù)，它可以讓 javascript 發(fā)送異步的 http 請(qǐng)求，與后臺(tái)通信進(jìn)行數(shù)據(jù)的獲取，ajax 最大的優(yōu)點(diǎn)是實(shí)現(xiàn)局部刷新，ajax可以發(fā)送http請(qǐng)求，當(dāng)獲取到后臺(tái)數(shù)據(jù)的時(shí)候更新頁(yè)面顯示數(shù)據(jù)實(shí)現(xiàn)局部刷新，在這里大家只需要記住，當(dāng)前端頁(yè)面想和后臺(tái)服務(wù)器進(jìn)行數(shù)據(jù)交互就可以使用ajax了。

這里提示一下大家, 在html頁(yè)面使用ajax需要在web服務(wù)器環(huán)境下運(yùn)行, 一般向自己的web服務(wù)器發(fā)送ajax請(qǐng)求。

2. ajax的使用

jquery將它封裝成了一個(gè)方法$.ajax()，我們可以直接用這個(gè)方法來(lái)執(zhí)行ajax請(qǐng)求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請(qǐng)求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請(qǐng)求方式，默認(rèn)是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒(méi)有參數(shù)不需要設(shè)置

    // 5.success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
    error:function () {
        alert("請(qǐng)求失敗,請(qǐng)稍后再試!");
    },
    // 7.async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數(shù)說(shuō)明:

url 請(qǐng)求地址
type 請(qǐng)求方式，默認(rèn)是'GET'，常用的還有'POST'
dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式
data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒(méi)有參數(shù)不需要設(shè)置
success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
error 設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
async 設(shè)置是否異步，默認(rèn)值是'true'，表示異步，一般不用寫
同步和異步說(shuō)明

同步是一個(gè)ajax請(qǐng)求完成另外一個(gè)才可以請(qǐng)求，需要等待上一個(gè)ajax請(qǐng)求完成，好比線程同步。
異步是多個(gè)ajax同時(shí)請(qǐng)求，不需要等待其它ajax請(qǐng)求完成，好比線程異步。

ajax的簡(jiǎn)寫方式:

$.ajax按照請(qǐng)求方式可以簡(jiǎn)寫成$.get或者$.post方式

ajax簡(jiǎn)寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請(qǐng)求地址
         2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒(méi)有參數(shù)不需要設(shè)置
         3. success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
         4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網(wǎng)絡(luò)異常");
        });

        /*
         1. url 請(qǐng)求地址
         2. data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù), 沒(méi)有參數(shù)不需要設(shè)置
         3. success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
         4. dataType 設(shè)置返回的數(shù)據(jù)格式，常用的是'json'格式, 默認(rèn)智能判斷數(shù)據(jù)格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name);
            console.log(data.time);
        }, "json").error(function(){
            alert("網(wǎng)絡(luò)異常");
        });
    });


</script>

$.get和$.post方法的參數(shù)說(shuō)明:

$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

url 請(qǐng)求地址
data 設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)，沒(méi)有參數(shù)不需要設(shè)置
success 設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)

data 請(qǐng)求的結(jié)果數(shù)據(jù)
status 請(qǐng)求的狀態(tài)信息, 比如: "success"
xhr 底層發(fā)送http請(qǐng)求XMLHttpRequest對(duì)象

dataType 設(shè)置返回的數(shù)據(jù)格式

"xml"
"html"
"text"
"json"

error 表示錯(cuò)誤異常處理

func 錯(cuò)誤異常回調(diào)函數(shù)

在線咨詢

上一篇：不限速下載工具：Progressive Downlo
下一篇：現(xiàn)在使用HTML5的十大理由

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商