JavaWeb網上圖書商城完整項目--12.項目所需jquery函數介紹之ajax

時間 2020-08-18

標籤 javaweb 網上圖書商城完整項目所需 jquery 函數介紹 ajax 欄目 Java 简体版

原文原文鏈接

jquery中使用ajax發送異步請求javascript

下面的一個案例在input輸入框失去焦點的時候發送一個異步的請求：html

咱們來看程序的案例：java

這裏要強調的是返回值最好選擇是json，json對應的就是對象，JavaScript中對象都是{}封裝的。jquery

咱們來看程序的代碼：ajax

當input輸入框失去焦點的時候，發送異步請求改變後面label標籤的值json

jquery中的ajax方法參數老是記不住，這裏記錄一下。數組

1.url:
要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。瀏覽器

2.type:
要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。緩存

3.timeout:
要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。服務器

4.async:
要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

5.cache:
要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data:
要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType:
要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
text：返回純文本字符串。

8.beforeSend：
要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。
            function(XMLHttpRequest){
               this;   //調用本次ajax請求時傳遞的options參數
            }
9.complete：
要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //調用本次ajax請求時傳遞的options參數
          }

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。
         (1)由服務器返回，並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this; //調用本次ajax請求時傳遞的options參數
         }

11.error:
要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //一般狀況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數
       }

12.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

14.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

15.global：
要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified：
要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：
要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username：
要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：
要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset：
要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

案例代碼：

咱們來看程序的代碼和總體的框架：

index.jsp的代碼：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
  </script>
  <script type="text/javascript">
  $(function(){
  
   $("#username").blur(function(){ //失去焦點的事件
   
   $.ajax({
      url:"${pageContext.request.contextPath}/LoginServlet",//異常請求的servlet處理類
      data: {username:$("#username").val(), pwd:$("#pwd").val()},//轉換爲&foo1=bar1&foo2=bar2
      async:true,//是不是異常請求，true是
      cache:false,//是否設置緩存
      dataType:"json",//設置服務器數據的返回方式
      type:"POST",//客戶端的請求方式
      success:function(result, textStatus){//在服務器成功返回時會調用該函數，result是服務器返回的zhi
      alert("42442");
      $("lable").empty();//清楚label標籤的內容
       if(result.msg =="true" ){    
            // view("修改爲功！");    
            $("lable").text("好人"); 
        }else{    
             $("lable").text("壞人");  
        }    
      
      }
      
      
      
      });
   });
   
   
    $("#username").focus(function(){ //得到焦點的事件
   
    $("lable").empty();//清空標籤中的全部內容 
   });
 
   
  });
   
    
  
 
  </script>
  
    
  </head>
  
<body>
<h1>This is a heading</h1></br>
用戶名：<input type="text" name="userName" id="username"><lable></lable></input></br>
密    碼：<input type="text" name="pwd" id="pwd"></input></br>
</body>
</html>

loginServlet：

package com.weiyuan.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        System.out.println("doPost is called");
        //得到ajax傳遞過來的參數
        String username = request.getParameter("username");
        String pwd = request.getParameter("pwd");
        System.out.println("username is "+username);
        System.out.println("pwd is "+pwd);
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json; charset=utf-8");
        String jsonStr ="";
        PrintWriter out = null;
        try {
            if("123456".equalsIgnoreCase(username)){
                 out = response.getWriter();
                 jsonStr ="{\"msg\":\"true\",\"type\":\"蟲子\"}";
                 out.write(jsonStr);
            }else{
                 out = response.getWriter();
                 jsonStr ="{\"msg\":\"false\",\"type\":\"蟲子\"}";
                 out.write(jsonStr);
                
            }
           
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (out != null) {
                out.close();
            }
        }
    }

}