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

最新推荐文章于 2023-10-06 23:15:02 发布

施小五

最新推荐文章于 2023-10-06 23:15:02 发布

阅读量184

点赞数

文章标签： $.ajax data怎么处理

本文链接：https://blog.csdn.net/weixin_34665386/article/details/112089892

版权

案例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 + "/";
%>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script type="text/javascript">
        function checkUserNamer() {
            //获取用户信息
            var uname=document.getElementById("uname").value;
            //创建ajax引擎对象
            var ajax;
            if (XMLHttpRequest){//其他浏览器
                ajax=new XMLHttpRequest();
            }else if(ActiveXObject){//ie浏览器
                ajax = new ActiveXObject("Msxml2.XMLHTTP")
            }else {
                alert("浏览器版本过低,请及时更新浏览器");
                return;
            }
            //声明监听函数
            ajax.onreadystatechange=function () {
                //判断ajax状态码
                if (ajax.readyState==4){
                    //判断响应状态码
                    if (ajax.status==200){
                        //获取响应数据
                        var data = ajax.responseText;
                        if (eval(data)){
                            //处理响应数据
                            var usp = document.getElementById("usp");
                            usp.style.color="red";
                            usp.innerHTML="用户名存在,请重新命名";
                        }else {
                            //处理响应数据
                            var usp = document.getElementById("usp");
                            usp.style.color="green"
                            usp.innerHTML="用户名可用";
                        }


                    }
                }
            }
                //创建并发送请求
            ajax.open("get","register?uname="+uname);
            ajax.send(null);
        }
    </script>
</head>
<body>

    用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUserNamer()"/><span id="usp"></span>

</body>
</html>

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
	namespace: 命名空间, 可以随意定义, 一般情况下要写全限定路径
	MyBatis管理SQL语句是通过namespace+id来定位的
 -->
<mapper namespace="com.lin.mapper.UserMapper">
        <select id="selUname" resultType="com.lin.pojo.User" >
        select * from t_user where uname=#{uname}
    </select>
</mapper>

个人封装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 + "/";
%>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script type="text/javascript" src="js/AjaxUtil.js"></script>
    <script type="text/javascript">
        function checkUserNamer() {
            //获取用户信息
            var uname=document.getElementById("uname").value;
           myAjax("get","register","uname="+uname,function (data) {
               if (eval(data)){
                   //处理响应数据
                   var usp = document.getElementById("usp");
                   usp.style.color="red";
                   usp.innerHTML="用户名存在,请重新命名";
               }else {
                   //处理响应数据
                   var usp = document.getElementById("usp");
                   usp.style.color="green"
                   usp.innerHTML="用户名可用";
               }
           })
        }

    </script>
</head>
<body>

    用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUserNamer()"/><span id="usp"></span>

</body>
</html>

上面已经介绍了一下自己封装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 + "/";
%>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" >
        //页面加载后开始执行
        $(function () {
            //给用户名文本框添加失去焦点事件
            $("#uname").blur(function () {
            //发起ajax请求,校验用户名是否被注册
                $.get("register",{uname:$("#uname").val()},function (data) {
                    if (eval(data)){
                        //处理响应数据
                        var usp = document.getElementById("usp");
                        usp.style.color="red";
                        usp.innerHTML="用户名存在,请重新命名";
                    }else {
                        //处理响应数据
                        var usp = document.getElementById("usp");
                        usp.style.color="green"
                        usp.innerHTML="用户名可用";
                    }
                })
            })
        })
    </script>
</head>
<body>
     用户名:<input type="text" name="uname" id="uname" value=""/><span id="usp"></span>
</body>
</html>

写法代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style>
      #box {
        width: 300px;
        height: 200px;
        border: 1px solid red;
      }
    </style>
    <script src="static/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      function getMsg3() {
        // load方法, 发送一次get方式的ajax请求, 将响应内容填充到元素内显示
        // url, data, callback
        $("#box").load("demo", function() {
          alert("操作完成!");
        });
      }

      function getMsg2() {
        // $.get用于发送一次get方式的ajax请求
        // $.post用于发送一次post方式的ajax请求
        // 有四个参数, url, data, success, dataType
        $.post("demo", {"username":"zhangsan", "password" : "123"}, function(data) {
          $("#box").html(data);
        }, "html");
      }

      function getMsg() {
        // $.ajax, 需要传递的参数可以使用json格式的对象来表示
        $.ajax({
          "url" : "demo1234", // 请求路径
          "type" : "post", // 请求方式
          "data" : {"username":"zhangsan", "password" : "123"},// 携带的数据
          "dataType" : "html", // 预期响应数据的格式
          "async" : true, // 是否使用异步请求
          "success" : function(data) {
            $("#box").html(data);
          },
          "error" : function() {
            alert("服务器忙...");
          }
        });
      }
    </script>
  </head>
  <body>
  <div id="box"></div>
  <input type="button" value="getMsg" onclick="getMsg3();">
  <script>
    document.write(Math.random());
  </script>
  </body>
</html>

施小五

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$.ajax data怎么处理_[AJAX] -AJAX,你要学的,都在这儿(封装ajax+使用jQuery.ajax)

案例1,注册页面时,提示用户名被占用思路:1、用户书写用户名信息，在失去焦点时进行用户校验2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在3、将校验结果响应给客户端4、在当前页面，也就用户名输入框后显示提示语技术:使用ajax技术一般是需要先进行格式校验的，但这里仅演示校验是否是否注册用户名被占用jsp页面<%@ page contentType="text/...
复制链接

扫一扫