日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX基本用法

發(fā)布時(shí)間：2025/3/12 编程问答 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 AJAX基本用法 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在工作中和一些大項(xiàng)目制作的時(shí)候，許多人都會(huì)選擇使用前后端分離技術(shù)即AJAX進(jìn)行項(xiàng)目的制作，使用AJAX不僅能提高效率而且更容易修改，使我們制作項(xiàng)目的時(shí)候更加的得心應(yīng)手。

在此給大家講解一下AJAX的用法，一共有五個(gè)核心內(nèi)容，掌握了這五個(gè)方面就掌握了AJAX技術(shù)的使用。

AJAX五個(gè)核心屬性分別是url, type, data, dataType, success這五個(gè)方面.

@1： url 目標(biāo)地址（對(duì)應(yīng)后臺(tái)的Servlet地址）
@2： type 使用方法的類型（post和get兩種）
@3： data 內(nèi)容（向目標(biāo)地址發(fā)送的內(nèi)容）
@4： dataType 文本類型（一般使用text和json）
@5： success 成功之后的操作

解釋說明：get和post在形式上和性能上的差異
? post傳輸數(shù)據(jù)時(shí)，不需要在URL中顯示出來，而get方法要在URL中顯示。
? post傳輸?shù)臄?shù)據(jù)量大，可以達(dá)到2M，而get方法由于受到URL長(zhǎng)度的限制,只能傳遞大約1024字節(jié).
? post是為了將數(shù)據(jù)傳送到服務(wù)器段,get是為了從服務(wù)器段取得數(shù)據(jù)。當(dāng)然get之所以也能傳送數(shù)據(jù),只是用來設(shè)計(jì)告訴服務(wù)器,你到底需要什么樣的數(shù)據(jù)，post的信息作為http請(qǐng)求的內(nèi)容，而get是在Http頭部傳輸?shù)摹?/p>

下面詳細(xì)講解一下用法

先看一下總體結(jié)構(gòu)

$.ajax({url:"http://localhost:8080/Ajax/login",type:"post",data:{name:name,pwd:pwd},dataType:"text",success:function(data){alert(data);}});

分步詳解

  • url指向目標(biāo)網(wǎng)址為http://localhost:8080/Ajax/login的一個(gè)Servlet
    • url:"http://localhost:8080/Ajax/login"
  • 使用post方法發(fā)送
    • type:"post"
  • 發(fā)送的內(nèi)容有賬號(hào)和密碼
    • data:{name:name,pwd:pwd}
  • 使用text文本
    • dataType:"text"
  • 成功之后彈窗顯示
    • success:function(data){alert(data);}

    看了上述五個(gè)核心屬性你還可以了解一下如下AJAX小案例，幫助你更快更好運(yùn)用。

    AJAX參考小案例

    沒有輸入任何內(nèi)容時(shí)

    都輸入內(nèi)容時(shí)

    前端代碼展示

    <!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script></head><style>#login{width: 100px;height: 30px;margin: 20px 50px;border: 2px solid greenyellow;border-radius: 10px;}</style><body>賬號(hào):<input type="text" name="name" id="name" /><br>密碼:<input type="password" name="pwd" id="pwd" /><br /><input type="button" value="登陸" id="login" /></body><script>$(function(){$(":button").on("click",function(){var name = $("#name").val();var pwd = $("#pwd").val();$.ajax({url:"http://localhost:8080/Ajax/login",type:"post",data:{name:name,pwd:pwd},dataType:"text",success:function(data){alert(data);}});});});</script> </html>

    后臺(tái)代碼展示

    package servlet;import java.io.IOException; import java.io.PrintWriter;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class LoginServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String name = request.getParameter("name");String pwd = request.getParameter("pwd");response.setContentType("text/html");//解決跨域問題response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out = response.getWriter();System.out.println(request.getRemoteAddr()+"/"+name+":"+pwd);if(name != null && pwd != null && !"".equals(name) && !"".equals(pwd)){out.print("ok");}else{out.print("error");}out.flush();out.close();}}

    看到這里相信你已經(jīng)會(huì)簡(jiǎn)單使用了，了解更多關(guān)注我呦！！！

    總結(jié)

    以上是生活随笔為你收集整理的AJAX基本用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。