jQuery AJAX —開篇 $.load()

最後更新：2014-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <script type="text/javascript" src="jquery.js"></script>        <script type="text/javascript">            $(document).ready(function(){                $("#btn").click(function(){                //從文字框中擷取內容                var userName = document.getElementById("UserName").value;                //load()方法從伺服器載入資料，並把返回的資料放入被選元素中。                //GET方式                $('#message').load("AJAX?name=" + userName);                //POST方式                //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});                });              });        </script>    </head>    <body>        <input type="text" id="UserName" value="admin"/>        <input type="button" id="btn" value="校正使用者名稱"/>        <br/>        <div id="message"></div>    </body></html>

　　//GET方式　　$('#message').load("AJAX?name="+ userName);　　//POST方式　　//$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});

服務端

//服務端public class AJAX extends HttpServlet {    //伺服器端代碼    protected void processRequest(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=UTF-8");        PrintWriter out = response.getWriter();        try {            String old = request.getParameter("name");            if (old == null) {                out.println("使用者名稱不可為空");            }else{                String name = new String(old.getBytes("ISO8859-1"),"gb2312");                //String name = URLDecoder.decode(old,"utf-8");                System.out.println(name);                if (name.equals("j")) {                    out.println("使用者名稱[" + name +"]已經存在，請使用其他使用者名稱");                }else{                    out.println("使用者名稱[" + name +"]尚未存在，可以使用");                }                //out.println("<a href=\"classic.html\">返回校正頁面</a>");            }                    } finally {            out.close();        }    }

XML

<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">    <servlet>        <servlet-name>AJAX</servlet-name>        <servlet-class>AJAX</servlet-class>        <load-on-startup>1</load-on-startup>    </servlet><servlet-mapping>        <servlet-name>AJAX</servlet-name>        <url-pattern>/AJAX</url-pattern>    </servlet-mapping><session-config>        <session-timeout>            30        </session-timeout>    </session-config></web-app>

...

$(selector).load(url,data,callback)把遠端資料載入到被選的元素中$.ajax(options)把遠端資料載入到XMLHttpRequest 對象中$.get(url,data,callback,type)
$.post(url,data,callback,type)使用HTTP GET 來載入遠端資料$.getJSON(url,data,callback)使用HTTP GET 來載入遠程 JSON 資料$.getScript(url,callback)載入並執行遠端JavaScript 檔案

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More