$.ajax data怎么处理_[AJAX] -AJAX,你要学的,都在这儿(封装ajax+使用jQuery.ajax)

案例1,注册页面时,提示用户名被占用

思路:

1、用户书写用户名信息，在失去焦点时进行用户校验

2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在

3、将校验结果响应给客户端

4、在当前页面，也就用户名输入框后显示提示语

技术:

使用ajax技术

一般是需要先进行格式校验的，但这里仅演示校验是否是否注册用户名被占用

jsp页面

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

    
    
    



    用户名:

UserServlet

package com.lin.servlet;

import com.lin.pojo.User;
import com.lin.service.UserService;
import com.lin.service.impl.UserServiceImpl;

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 java.io.IOException;

public class UserRegister extends HttpServlet {
      
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      
        //设置请求编码格式
        req.setCharacterEncoding("utf-8");
        //设置响应编码格式
        resp.setContentType("text/html;charset=utf-8");
        //获取请求信息
        String uname = req.getParameter("uname");
        //处理请求信息
        UserService service = new UserServiceImpl();
        User user= service.selUname(uname);
        System.out.println(user);
    if (user!=null){
      
            resp.getWriter().write("true");
        }else {
      
           resp.getWriter().write("false");
        }

    }
}

UserService

package com.lin.service;

import com.lin.pojo.User;
import org.apache.ibatis.annotations.Param;

public interface UserService {
      
    User selUname(@Param("uname") String uname);
}

UserServiceimpl

package com.lin.service.impl;

import com.lin.mapper.UserMapper;
import com.lin.pojo.User;
import com.lin.service.UserService;
import com.lin.util.MyBatisUtil;
import org.apache.ibatis.session.SqlSession;

public class UserServiceImpl implements UserService {
      
    @Override
    public User selUname(String uname) {
      
        SqlSession session = MyBatisUtil.getSession();
        UserMapper mapper = session.getMapper(UserMapper.class);
        session.close();
        return mapper.selUname(uname);
    }
}

UserMapper

package com.lin.mapper;

import com.lin.pojo.User;

public interface UserMapper {
      
    User selUname(String uname);
}

UserMapper.xml

        
        select * from t_user where uname=#{uname}
    

---

个人封装ajax

纵观上面的ajax的流程书写我们可以发现是有许多东西可以提取的,提取后完全可以降低我们书写的重复冗余代码,实际上这里是可以不用看的,因为jQuery中有人比我们封装的更好,但是还是要领会一下封装的精髓-有复制粘贴的冲动的时候,就可以进行封装了

封装的js

/*
 mothod : 请求方式
        url    : 请求地址
        data   : 请求参数 请求参数的格式为键值对格式的字符串,不同的键值对使用&符号隔开,如果没有请求数据传入null
                 示例:"a=1&b=2"
        deal200 : 响应处理参数
                   该参数接收js的函数对象函数对象中声明ajax响应数据的处理逻辑代码
                   注意:函数对象需要声明一个形参用来接收要处理的响应数据
        ansyc  : 是否同步异步开启
* */
function myAjax(method,url,data,deal200,ansyc) {
      
    //创建ajax引擎对象
    var ajax;
    if (XMLHttpRequest){
      //其他浏览器
        ajax=new XMLHttpRequest();
    }else if(ActiveXObject){
      //ie浏览器
        ajax = new ActiveXObject("Msxml2.XMLHTTP")
    }else {
      
        alert("浏览器版本过低,请及时更新浏览器");
        return;
    }
    //声明监听函数
    ajax.onreadystatechange=function () {
      
        if (ajax.readyState==4){
      
            if (ajax.status==200){
      
                //获取响应数据
                var data = ajax.responseText;
                if (deal200){
      //相当于Booleandeal200
                    deal200(data);
                }
            }
        }
    }
    if ("get"==method.toLowerCase()){
      
        //创建并发送请求
        ajax.open("get",url+(data==null?"":"?"+data),ansyc);
        ajax.send(null);
    }else if ("post"==method.toLowerCase()){
      
        //创建并发送请求
        ajax.open("post",url+(data==null?"":"?"+data),ansyc);
        //设置请求数据为键值对数据
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(data);
    }

}

页面引用

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

    
    
    
    



    用户名:

---

上面已经介绍了一下自己封装ajax的流程,那这里呢就开始介绍学习jQuery中为我们封装的ajax,我们自己封装的不是不好,而是考虑的没有有多年工作经验的别人封装的好,所以既然有更好的工具,为什么不能拿来用呢?

jquery是js的一个轻量型框架，已经将jis创建的操作进行了封装，而ajax也是js的一部分，所以jQuery也已经将ajax进行了封装。

jQuery对ajax有很好的支持, 分为三个层次:

> 第一级别: $.ajax: 最基本的封装

> 第二级别:

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

• $.get(url,data,fun)

示例:

url:请求地址

data:请求参数,参数格式为json对象

fun:回调函数,主义要声明一个形参,用来接收响应数据

  $.get("register",{uname:$("#uname").val()},function (data) {
                  
                })

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

• $.post(url,data,fun)

示例:

url:请求地址

data:请求参数,参数格式为json对象

fun:回调函数,注意要声明一个形参,用来接收响应数据

 $.post("register",{uname:$("#uname").val()},function (data) {
                  
                })

• $.getJSON(json格式参数)

参照api吧- -

> 第三级别: obj.load

如果有特殊的订制要求，可以使用。
jQuery.ajax()

使用jQuery封装的ajax写的页面代码

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

    
    
    
    


     用户名:

写法代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>