jQuery中Ajax的簡單使用:load(),\$.get(),登入驗證使用者,JackSon

jQuery 中的 Ajax

哇,終于可用不用寫原生的東西了,前面寫都要寫到瘋掉了,下面看jQuery将它封裝得多簡單
jQuery 對 Ajax 操作進行了封裝, 在 jQuery 中
最底層的方法時 $.ajax(), 
第二層是 load(), $.get() 和 $.post(), 
第三層是 $.getScript() 和 $.getJSON()

load()

load() 方法是 jQuery 中最為簡單和常用的 Ajax 方法, 
能載入遠端的 HTML 代碼并插入到 DOM 中. 
它的結構是:   load(url[, data][,callback])
程式員隻需要使用 jQuery 選擇器為 HTML 片段指定目标位置, 
然後将要加載的檔案的 url 做為參數傳遞給 load() 方法即可

細節
如果隻需要加載目标 HTML 頁面内的某些元素, 
則可以通過 load() 方法的 URL 參數來達到目的. 
通過 URL 參數指定選擇符, 就可以友善的從加載過來的 HTML 文檔中選出所需要的内容.
load() 方法的 URL 參數的文法結構為 “url selector”(注意: url 和 選擇器之間有一個空格)
傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 
如果沒有參數傳遞, 采用 GET 方式傳遞, 否則采用 POST 方式
對于必須在加載完才能繼續的操作, load() 方法提供了回調函數, 
該函數有三個參數: 
代表請求傳回内容的 data;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
    @import url("clearleft.css");
  </style>
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      $("a").click(function(){
        var url =this.href;
        /* 上面和下面都是傳回全部的請求資訊,
        但是上面會得到所有的傳回資訊 
        下面的就會進行篩選,找到h2下面的a
        */
        var url= this.href+" h2 a";
        //load加上參數後變成post請求,沒有參數就是get請求
        var args={"time":new Date()};
        $("#details").load(url,args);
        return false;
      });
    })
  </script>
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.html">Andy</a>
    </li>
    <li>
      <a href="files/richard.html">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.html">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

$.get() (或$.post())

$.get() 方法使用 GET 方式來進行異步請求. 
它的結構是: $.get(url[, data][, callback][, type]);
$.get() 方法的回調函數隻有兩個參數: 
data 代表傳回的内容, 可以是 XML 文檔, JSON 檔案, HTML 片段等; 
textstatus 代表請求狀态, 其值可能為: succuss, error, notmodify, timeout 4 種.
使用$.get()  和 $.post() 方法時,回調函數中的data是JavaScript對象,可轉換成jQuery對象,
然後使用jQuery 中的全局函數 find()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
    @import url("clearleft.css");
  </style>
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      $("a").click(function(){
        var url =this.href;
        var args={"time":new Date()};
        $.get(url, args, function(data){
          var name =$(data).find("name").text();
          var email =$(data).find("email").text();
          var website =$(data).find("website").text();
          $("#details").empty()
            .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
            .append("<a href='"+website+"'>"+website+"/</a>");
          /* 
            大家注意上面的拼接呀,很容易出錯
            <h2><a href="mailto:[email protected]">Andy Budd</a></h2>
          <a href="http://andybudd.com/">http://andybudd.com/</a>
          */
        });
        return false;
      });
    })
  </script>
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.xml">Andy</a>
    </li>
    <li>
      <a href="files/richard.xml">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.xml">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
    @import url("clearleft.css");
  </style>
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function(){
      $("a").click(function(){
        var url =this.href;
        var args={"time":new Date()};
        /* 或者也可以使用get方法,但是需要指定傳回對象的類型
        $.get(url,args,function(){},"JSON");
        */
        $.getJSON(url, args, function(data){
          var name =data.person.name;
          var email =data.person.email;
          var website =data.person.website;
          $("#details").empty()
            .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")
            .append("<a href='"+website+"'>"+website+"/</a>");
          /* 
            大家注意上面的拼接呀,很容易出錯
            <h2><a href="mailto:[email protected]">Andy Budd</a></h2>
          <a href="http://andybudd.com/">http://andybudd.com/</a>
          */
        });
        return false;
      });
    })
  </script>
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.js">Andy</a>
    </li>
    <li>
      <a href="files/richard.js">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.js">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

登入驗證使用者名例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 
1.導入jQuery庫
2.擷取name="username"的節點
3.為username添加change響應函數
4.擷取username的value屬性值,去除前後的空格,判斷不為空
5.發送Ajax請求檢驗username是否被占用
6.在服務端直接傳回一個html片段:<font color="red">使用者名已經被使用</font>
7.在用戶端直接添加到html中
 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        $(":input[name='username']").change(function(){
            var val=$(this).val();
            val=$.trim(val);
            if(val!="")
            {
                var url="${pageContext.request.contextPath}/valiateUserName";
                var args={"userName":val,"time":new Date()};
                $.post(url,args,function(data){
                    $("#message").html(data);
                });
            }
        });
    })
</script>
</head>
<body>
    <form action="" method="post">
        Username:<input type="text" name="username">
        <br/>
        <div id="message"></div>
        <br/>
        <input type="submit" value="submit">
    </form>
</body>
</html>

package jane;

import java.io.IOException;
import java.util.Arrays;
import java.util.List;

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

public class ValiateUserName extends HttpServlet {
  private static final long serialVersionUID = 1L;

  protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Ajax請求了");
    List<String> usernames=Arrays.asList("a","b","c");
    String result="";
    String username=request.getParameter("userName");
    System.out.println(username);
    if(usernames.contains(username))
    {
      result="<font color='red'>已經使用</font>";
    }
    else
    {
      result="<font color='green'>可以使用</font>";
    }
    response.setContentType("text/html;charset=UTF-8");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(result);
  }
}

購物車例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 
1.擷取所有的a節點,并且添加響應函數,取消預設行為
2.準備Ajax請求:url,args
3.響應一個JSON對象,有:bookname,totalnumber,totalmoney
4.将響應的資料放在對應的位置
 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        var isHasCar="${sessionScope.sc==null}";
        if(isHasCar)
        {
            $("#carstatus").hide();
        }
        else
        {
            $("#carstatus").show();
            $("#bookname").text("${sessionScope.sc.bookname}");
            $("#totalnumber").text("${sessionScope.sc.totalnumber}");
            $("#totalmoney").text("${sessionScope.sc.totalmoney}");
        }
        
        $("a").click(function(){
            $("#carstatus").show();
            var url =this.href;
            var args={"time":new Date()};
            $.getJSON(url,args,function(data){
                $("#bookname").text(data.bookname);
                $("#totalnumber").text(data.totalnumber);
                $("#totalmoney").text(data.totalmoney);
            });
            return false;
        });
    })
</script>
</head>
<body>
    <div id="carstatus">
    将<span id="bookname"></span>加入購物車,
    購物車書有<span id="totalnumber"></span>本,
    總價格<span id="totalmoney"></span>元
    </div>
    <br>
    Java<a href="${pageContext.request.contextPath }/addToCar?id=Java&price=100">加入購物車</a>
    <br/>
    C<a href="${pageContext.request.contextPath }/addToCar?id=C&price=200">加入購物車</a>
    <br/>
    Python<a href="${pageContext.request.contextPath }/addToCar?id=Python&price=300">加入購物車</a>
    <br/>
</body>
</html>

package jane.bean;

import java.util.HashMap;
import java.util.Map;

public class ShoppingCar
{
  public Map<String,ShoppingCarItem> items=new HashMap<String,ShoppingCarItem>();
  public String bookname;
  
  public void addToCar(String name,int price)
  {
    this.bookname=name;
    if(items.containsKey(name))
    {
      ShoppingCarItem shoppingCarItem = items.get(name);
      shoppingCarItem.setNumber(shoppingCarItem.number+1);
    }
    else
    {
      ShoppingCarItem shoppingCarItem = new ShoppingCarItem();
      shoppingCarItem.setBookname(name);
      shoppingCarItem.setPrice(price);
      shoppingCarItem.number=1;
      items.put(name, shoppingCarItem);
    }
  }
  public String getBookname()
  {
    return bookname;
  }
  public void setBookname(String bookname)
  {
    this.bookname = bookname;
  }
  public int getBookNumber()
  {
    int total=0;
    for(ShoppingCarItem item:items.values())
    {
      total+=item.number;
    }
    return total;
  }
  public int getTatolMoeny()
  {
    int money=0;
    for(ShoppingCarItem item:items.values())
    {
      money+=item.number *item.price;
    }
    return money;
  }
}

package jane.bean;

public class ShoppingCarItem
{
  public int number;
  public String bookname;
  public int price;
  public int getNumber()
  {
    return number;
  }
  public void setNumber(int number)
  {
    this.number = number;
  }
  public String getBookname()
  {
    return bookname;
  }
  public void setBookname(String bookname)
  {
    this.bookname = bookname;
  }
  public int getPrice()
  {
    return price;
  }
  public void setPrice(int price)
  {
    this.price = price;
  }
}

package jane;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import jane.bean.ShoppingCar;

public class AddToCar extends HttpServlet {
  private static final long serialVersionUID = 1L;
  protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /*
     * 擷取請求參數id和price
     * 擷取購物車對象
     * 把點選的選項加入到購物車中
     * 準備響應的JSON對象
     */
    String bookname=request.getParameter("id");
    int price=Integer.parseInt(request.getParameter("price"));
    
    HttpSession session=request.getSession();
    ShoppingCar sc =(ShoppingCar) session.getAttribute("sc");
    if(sc==null)
    {
      sc=new ShoppingCar();
      session.setAttribute("sc", sc);
    }
    sc.addToCar(bookname, price);
    //準備JSON對象
    //而且注意:從服務端傳回JSON字元串,屬性名必須使用雙引号
    StringBuilder result=new StringBuilder();
    result.append("{")
      .append("\"bookname\":\""+bookname+"\"")
      .append(",")
      .append("\"totalnumber\":"+sc.getBookNumber())
      .append(",")
      .append("\"totalmoney\":"+sc.getTatolMoeny())
      .append("}");
    response.setContentType("text/javascript");
    response.getWriter().write(result.toString());
  }
}

JackSon

package jane;

import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Student
{
  public String name;
  public String id;
  
  public Student(String name, String id)
  {
    super();
    this.name = name;
    this.id = id;
  }
  public String getName()
  {
    return name;
  }
  public void setName(String name)
  {
    this.name = name;
  }
  public String getId()
  {
    return id;
  }
  public void setId(String id)
  {
    this.id = id;
  }
  public String getStudentCity()
  {
    return "廣州";
  }
  @JsonIgnore
  public String getbirthday()
  {
    return "2020-12-9";
  }
  public static void main(String[] args) throws Throwable
  {
    /*
     * 導入jar包
     *  jackson-annotations-2.6.0.jar
      jackson-core-2.6.0.jar
      jackson-databind-2.6.0.jar
     * 建立ObjectMapper對象
     * 調用ObjectMapper的writeValueAsString方法
     * 注意:
     *   1.JackSon使用getter方法來定位JSON對象的屬性,就是通過getter擷取值來建立JSON對象
     *  2.可以通過添加注解com.fasterxml.jackson.annotation.JsonIgnore
     *   忽略某個getter定義的屬性
     *  3.還可以将集合轉化成JSON對象
     */
    ObjectMapper objectMapper = new ObjectMapper();
    Student student = new Student("zhangsan", "110");
    String writeValueAsString = objectMapper.writeValueAsString(student);
    System.out.println(writeValueAsString);
    //結果:{"name":"zhangsan","id":"110","studentCity":"廣州"}
  }
}

jQuery中Ajax的簡單使用:load(),\$.get(),登入驗證使用者,JackSon

jQuery 中的 Ajax

load()

$.get() (或$.post())

登入驗證使用者名例子

購物車例子

JackSon

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method