jQuery中Ajax的简单使用:load(),\$.get(),登录验证用户,JackSon

原创

qq5e86804b406ce 2022-10-28 10:16:35 ©著作权

©著作权归作者所有：来自51CTO博客作者qq5e86804b406ce的原创作品，请联系作者获取转载授权，否则将追究法律责任

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;

jQuery中Ajax的简单使用:load(),$.get(),登录验证用户,JackSon_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;
        /* 上面和下面都是返回全部的请求信息,
        但是上面会得到所有的返回信息 
        下面的就会进行筛选,找到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()

jQuery中Ajax的简单使用:load(),$.get(),登录验证用户,JackSon_html_02

<!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:andy@clearleft.com">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:andy@clearleft.com">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

对应的jar包可以去Maven的中央仓库下载:中央仓库

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":"广州"}
  }
}