jQuery常用AJAX-API

浪子不回头ぞ 提交于 2020-03-27 02:13:41

目的:简化客户端与服务端进行局部刷新的异步通讯

   (1)取得服务端当前时间

             简单形式:jQuery对象.load(url)

                             返回结果自动添加到jQuery对象代表的标签中间

                             如果是Servlet的话,采用的是GET方式

        复杂形式:jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

                             sendData = {"user.name":"jack","user.pass":"123"};

                             以JSON格式文本方式发送,使用POST方式发送,服务端能收到数据

        注意:对于load方法而言,如果请求体无参数发送的话,load方法

采用GET方式提交

        注意:对于load方法而言,如果请求体有参数发送的话,load方法

采用POST方式提交

注意:使用load方法时,自动进行编码,无需手工编码

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>取得服务端当前时间</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    当前时间:<span id="time"></span><br/>
    <input type="button" value="获取时间"/>
    
    
    
    <script type="text/javascript">
        $(":button").click(function(){
            //参数一:发送的路径
            var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime();
            //参数二:以JSON文本书写的发送的参数
            var sendDate = {
                "name" : "哈哈",
                "sal"  :  6000
            };
            //参数三:回调函数
            $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
                //回调函数中参数一:backData表示返回的数据,它是js对象
                //回调函数中参数二:textStatus表示返回状态的文本描述,例如:success,error,
                //回调函数中参数三:xmlHttpRequest表示ajax中的核心对象
                //alert("backData=" + backData);//它是一个js对象
                //alert("textStatus=" + textStatus);
                //alert("xmlHttpRequest=" + xmlHttpRequest.readyState);
                //alert("xmlHttpRequest=" + xmlHttpRequest.status);
                //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串
                //项目中只需要使用backDate即可                
            });
            
                            
            //$("#time").load(url,sendDate);
            //$("#time").load(url);
        });
    </script>
    
  </body>
</html>
package loaderman.time;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 取得服务端当前时间
 * @author AdminTC
 */
public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("GET");
        String name = request.getParameter("name");
        String sal = request.getParameter("sal");
        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("POST");
        String name = request.getParameter("name");
        String sal = request.getParameter("sal");
        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}

 

load()方法参数解释:

             参数一:url发送到哪里去

             参数二: sendData发送请求体中的数据,符合JSON格式,例如:{key:value,key:value}

             参数三:function处理函数,类似于传统方式ajax.onreadystatechange = 处理函数

 

             其中参数三为function处理函数最多可以接收三个参数,含义如下

                   第一个参数:服务端返回的数据,例如:backData

                   第二个参数:服务端状态码的文本描述,例如:success、error、

                   第三个参数:ajax异步对象,即XMLHttpRequest对象

        以上所有参数的名字可以任意,但必须按顺序书写,尽量做到见名知意


 

检查注册用户名和密码是否存在

        $.get(url,sendData,function(backData,textStatus,ajax){... ...})

        $.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡

        注意:使用get或post方法时,自动进行编码,无需手工编码

jQuery对象.serialize()

        作用:自动生成JSON格式的文本

             注意:为每个jQuery对象设置一个name属性,因为name属性会被认为请求参数名

             注意:必须用<form>标签元素

             适用:如果属性过多,强烈推荐采用这个API

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>检查注册用户名和密码是否存在</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <!-- 
        在异步提交的方式下,form标签的action和method属性没有意义
    -->
    <form action="01_time.jsp" method="GET">
        <table border="2" align="center">
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="检查" style="width:111px"/>
                </td>
            </tr>
        </table>
    </form>
    
    <span></span>
    
    
    <script type="text/javascript">
        $(":button").click(function(){
            var username = $(":text").val();//哈哈
            var password = $(":password").val();//123
            var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();
            /*手工写JSON文本
            var sendData = {
                "username" : username,
                "password" : password
            };
            */
            var sendData = $("form").serialize();
            $.post(url,sendData,function(backDate){
                //backDate:
                //如果服务器返回html,即backDate就是string,不要解析
                //如果服务器返回json,即backDate就是object,要解析    
                //如果服务器返回xml,即backDate就是object,要解析    
                var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");
                $("span").text("");
                $("span").append($img);
            });
        });
    </script>
    
  </body>
</html>
package loaderman.user;

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

/**
 * 检查注册用户名和密码是否存在
 * @author AdminTC
 */
public class UserServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");//哈哈
        String password = request.getParameter("password");//123
        String tip = "images/MsgSent.gif";
        if("哈哈".equals(username) && "123".equals(password)){
            tip = "images/MsgError.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!