Jquery第三篇【AJAX 相關的API】

時間  2019-11-21
標籤 jquery 第三 AJAX 相關的API 欄目 JQuery 简体版
原文   原文鏈接

前言

前面咱們已經學了講解了Jquery的選擇器，關於DOM 的API還有事件的API。本博文須要講解Jquery對AJAX的支持…javascript

咱們在開始使用JavaScript學習AJAX的時候，建立異步對象時，須要根據不一樣的瀏覽器來建立不一樣的對象….裝載XML文件的時候，也有兼容性的問題。html

Jquery就很好地屏蔽了瀏覽器不一樣的問題，不須要考慮瀏覽器兼容的問題，這是很是很是方便咱們開發的。java

Jquery對ajax經常使用的API

  • $.ajax([options])
  • load(url, [data], [callback])
  • $.get(url, [data], [fn], [type])
  • $post(url, [data], [callback], [type])
  • serialize()

前4個方法的功能都是差很少的，都是向服務器發送請求，獲得服務器返回的數據。jquery

最後一個是對錶單的數據進行封裝，將表單的數據封裝成JSON格式ajax

load()

首先，咱們來使用一下load()這個方法吧。在文檔中對它的解釋是這樣子的。apache

這裏寫圖片描述

我來補充一下：json

  • 第一個參數：表示的是要請求的路徑
  • 第二個參數：要把哪些參數帶過去給服務器端，須要的是JSON格式的
  • 第三個參數：回調方法，服務器返回給異步對象的時候，會調用該方法

回調方法也有三個參數：瀏覽器

  • 回調函數中參數一：backData表示返回的數據，它是js對象
  • 回調函數中參數二：textStatus表示返回狀態的文本描述，例如：success，error，
  • 回調函數中參數三：xmlHttpRequest表示ajax中的核心對象

通常地，咱們只須要用到第一個參數！服務器

咱們來使用這個方法來獲取當前的時間，對這個方法熟悉一下：markdown

調用load方法的jquery對象，返回結果自動添加到jQuery對象表明的標籤中間

  • 若是帶參數就自動使用post，不帶參數自動使用get。
  • 使用load方法時，自動進行編碼，無需手工編碼
<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

  </head>
  <body>
  當前時間是：<span id="time"></span><br>
  <input type="button" id="button" value="獲取當前時間">

  <script type="text/javascript"> $("#button").click(function () { //請求服務器端的路徑 var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime(); //沒有要參數要帶過去 //var sendData = null; /* * function方法的三個參數： * 第一個參數表示服務器端帶回來的數據，是JS對象 * 第二個參數表示的是返回狀態的文字描述【用處不大】 * 第三個參數表示的是異步對象，通常咱們用來看服務器端返回的JSON的值是什麼【用處還行】 * 由於第一個參數返回的是JS對象，所以咱們是看不見具體JSON的值是什麼，因此有的時候要用第三個參數 * * 值得注意的是： * 要想使用第三個參數，就必須把前兩個參數給寫上！ * 調用load方法的jquery對象，返回結果自動添加到jQuery對象表明的標籤中間 * */ $("#time").load(url); }); </script>


  </body>
</html>
  • Servlet代碼：
 protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String date = dateFormat.format(new Date()); PrintWriter writer = response.getWriter(); writer.write(date); writer.flush(); writer.close(); }
  • 效果：

這裏寫圖片描述

$.get()

上面的load()方法，當咱們帶參數給服務器的時候，就自動轉化成post、不帶參數的時候就轉換成get。$.get()就是指定是get方法

load()方法是使用Jquery對象來調用的，而且調用事後，會把數據自動填充到Jquery對象的標籤中間，而$.get()並非特定的Jquery對象來調用！

$.get(url, [data], [fn], [type])參數和load()是徹底相似的，咱們在上面的例子中該一下就好了。

因爲$.get()是沒有將返回的數據自動填充到標籤之中，所以須要手動地添加到指定的標籤之中！

$.get(url, function (backData) {

        //獲得客戶端返回的數據【JS對象】

        $("#time").append(backData);
      });
  • 效果：

這裏寫圖片描述

$.post()

.get()是十分相似的，只不過是把請求方式改變了，通常狀況下，咱們有參數傳遞給服務器的時候，都是用post方式的。

使用$.post()方法是須要設定編碼的，它和load()方法是不同的！

下面使用檢查用戶名和密碼是否合法的案例來講明這兩個方法：

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

</head>
<body>

<%--使用異步操做，表單的form和method都不是必須的，若是指定了，仍是會根據後面Jquery的方法和參數來決定--%>
<form>

    <table>
        <tr>
            <td>用戶名：</td>
            <td><input type="text"></td>
        </tr>

        <tr>
            <td>密碼：</td>
            <td><input type="password"></td>
        </tr>

        <tr>
            <td><input type="button" value="檢查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>

<script type="text/javascript"> $(":button").click(function () { var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime(); //要傳送過去的數據必須是JSON格式的 var sendData = { username: $(":text").val(), password: $(":password").val() }; $.post(url, sendData, function (backData) { //獲得返回的數據，填充到相對應的位置 $("#backData").text(backData); }); }); </script>


</body>
</html>
  • Servlet代碼：
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/** * Created by ozc on 2017/5/21. */
@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //設定編碼
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        String backData = "用戶名和密碼合法";
        if ("哈哈".equals(username) && "123".equals(password)) {

            backData = "用戶名或密碼不合法";
        }

        response.getWriter().write(backData);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }
}

這裏寫圖片描述這裏寫圖片描述

serialize()

上面在介紹參數的時候已經說了，發送給服務器端的參數是須要JSON格式的，可是呢，若是我在表單中有不少不少的參數呢？？？那不是要我本身一個一個地去拼接？？？？

因而乎，Jquery也提供了serialize()這麼一個方法，給咱們自動把表單中的數據封裝成JSON格式的數據

使用以前要注意的是：

  • 爲每一個jQuery對象設置一個name屬性，由於name屬性會被認爲請求參數名
  • 必須在<form>標籤元素以內

根據上面的例子，咱們來使用一下，咱們調用serialize()方法，不本身去拼接JSON

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/18 Time: 13:36 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

</head>
<body>

<%--使用異步操做，表單的form和method都不是必須的，若是指定了，仍是會根據後面Jquery的方法和參數來決定--%>
<form>
    <table>


        <%--要想使用serialize這個方法，就必須在表單以內，而且給上對應的name屬性--%>
        <tr>
            <td>用戶名：</td>
            <td><input type="text" name="username"></td>
        </tr>

        <tr>
            <td>密碼：</td>
            <td><input type="password" name="password"></td>
        </tr>

        <tr>
            <td><input type="button" value="檢查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>

<script type="text/javascript"> $(":button").click(function () { var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime(); //要傳送過去的數據必須是JSON格式的 /* var sendData = { username: $(":text").val(), password: $(":password").val() };*/ var sendData = $("form").serialize(); $.post(url, sendData, function (backData) { //獲得返回的數據，填充到相對應的位置 $("#backData").text(backData); }); }); </script>


</body>
</html>
  • 效果：

這裏寫圖片描述

$.ajax()

對於這個方法，咱們又使用二級聯動這個案例來說解吧。咱們曾經使用過JavaScript來解析XML、JSON來實現二級聯動。此次我使用Jquery+Struts2+JSON來實現二級聯動。

$.ajax()這個方法接收的參數是一個JSON類型，JSON裏面有幾個參數：

  • type【請求類型】
  • url【請求路徑】
  • data【發送給服務器的數據，也是一個JSON類型】
  • success【回調函數】

這裏遇到的問題：動態獲取選擇下拉框的值時候，調用的是val()而不是text()….

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省份-城市，基於jQuery的AJAX二級聯動</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>

<%--############前臺頁面##############################--%>
<select name="province" id="provinceId">
    <option>請選擇省份</option>
    <option>廣東</option>
    <option>北京</option>
</select>
<select name="city" id="cityId">
    <option>請選擇城市</option>
</select>


<%--############監聽省份##############################--%>
<script type="text/javascript"> $("#provinceId").change( function() { //每次調用的時候，把城市的值清空，除了第一項 $("#cityId option:gt(0)").remove(); //獲得具體選擇的值，講道理這裏應該是test的，但是test()沒反應，要用val() var province = $("#provinceId option:selected").val(); //若是不是「請選擇省份」，才觸發事件 if ("請選擇省份" != province) { //它接收的是一個JSON類型的數據 $.ajax( { type: "POST", url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(), data: {"province": province}, success: function (backData, aaa, ajax) { //看下服務器帶過來的數據是什麼樣的，而後再對JSON進行解析 //alert(ajax.responseText); //獲得服務器返回的數據,是一個JSON格式數據 var array = backData.city; for(var i=0;i<array.length;i++) { //動態建立option節點，添加到城市下拉框中 var $option = $("<option>" + array[i] + "</option>"); $("#cityId").append($option); } } } ); } }); </script>
  • Action
import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;
import java.util.List;

/** * Created by ozc on 2017/5/18. */
public class ProvinceAction extends ActionSupport{

    //自動封裝數據
    private String province;

    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }

    //封裝城市的集合
    private List<String> city = new ArrayList<>();
    public List<String> getCity() {
        return city;
    }


    public String findCityByProvince() throws Exception {

        if ("廣東".equals(province)) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(province)) {
            city.add("一環");
            city.add("二環");
            city.add("三環");
            city.add("四環");

        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }

}
  • Struts.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">


<struts>
   <package name="province" extends="json-default" namespace="/">

        <global-results>
            <result name="ok" type="json"></result>
        </global-results>
        <action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
        </action>

    </package>
</struts>
  • 效果：

這裏寫圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程