Ajax与Json笔记

最新推荐文章于 2024-08-13 13:25:54 发布

南风吐月饼

最新推荐文章于 2024-08-13 13:25:54 发布

阅读量85

点赞数

分类专栏： Java 文章标签： ajax json javascript

本文链接：https://blog.csdn.net/weixin_42744651/article/details/120440580

版权

Java 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ajax实现用户注册时验证用户名是否被使用

概述：Ajax是在不重新加载整个页面的情况下(即“无刷新”技术)，向服务器发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页面的功能。可以使用XML、JSON、HTML等数据格式来封装请求或响应

同步与异步的区别：同步是所有的操作都做完，才返回给用户结果；这样用户等待时间太长，用户体验不好。
异步不用等所有操作都做完，就响应用户请求；即先响应用户请求，然后慢慢去写数据库，用户体验较好。

需求：当用户名已被使用时，弹出框提示该用户名已被使用；若未被使用，则提示该用户名可以使用

使用JavaScript方式实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>注册页面</title></head>
<script type="text/javascript">
    function resp(){
        var xmlhttp;
        if(window.XMLHttpRequest){ //返回值为true说明是新版IE或其它浏览器
            //非IE浏览器 会进入该方法体
            xmlhttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            //旧版本IE创建XMLHttpRequest对象
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //打开链接,true表示使用异步的方式发送请求
        var uname = document.getElementById("un").value;
        // xmlhttp.open("get","/ajax/testuname?uname="+uname,true);
        // post创建http请求
        xmlhttp.open("post","/ajax/testuname",true);
        //指定回调函数
        xmlhttp.onreadystatechange = callback;
        console.log(uname);
        //使用get请求发送请求
        //xmlhttp.send();

        //使用post提交的话 需要变成以下提交方式(指定请求头信息、指定post请求需要带的参数值)
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
        xmlhttp.send("uname="+uname);

        function callback() {
            if (xmlhttp.status === 200 && xmlhttp.readyState === 4){
                if (xmlhttp.responseText == "true"){
                    alert("用户名可以使用");
                }else{
                    alert("该用户名已被注册");
                }
            }
        }
    }
</script>
<body>
    用户名:<input id="un" type="text" name="uname" onblur="resp()"><span id="rs"></span>
</body>
</html>

servlet对应代码

@WebServlet(urlPatterns = "/testuname",name = "ajaxServlet")
public class ajaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request,response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        if (request.getParameter("uname").equals("admin")){
            out.write("false");
        }else{
            out.write("true");
        }
    }
}

Jquery实现ajax的方式

$.ajxa()方法只有一个参数settings，是一个列表结构对象，用于配置AJAX请求的键值对集合。配置参数如下：

String url - 发送请求的地址
String type - 请求方式，默认为get
Number timeout - 设置请求超时时间
Object data 或 String data 发送到服务器的数据
String dataType 预期服务器返回的数据类型。可用类型有XML、HTML、Script、JSON、Text、JSONP
function success(Object result,String ts) result - 服务器返回的数据 & ts 描述请求类型的字符串参数都为可选

$.get(url,data,success(response,status,xhr),dataType);方法

$.post(url,data,success(response,status,xhr),dataType);

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="./js/jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        $("#un").blur(function (){
            $.ajax({
                url:"/ajax/testuname",
                type:"post",
                data:"uname="+$(this).val(),
                success:function (result){
                    if (result === "true"){
                        alert("用户名可以使用");
                        $("#rs").text("用户名可以使用");
                    }else{
                        alert("用户名已被使用");
                        $("#rs").text("用户名已被使用");
                    }
                }
            });
        });
    });
</script>
<body>
    用户名:<input id="un" type="text" name="uname"><span id="rs"></span>
</body>
</html>

JQuery中的load()方法

load()方法通过发送ajax请求从服务器端加载数据，并把返回的数据放置到指定的元素中

语法： $(select).load(url,data,function(result,status,xhr));

回调函数是可选的，result代表响应数据 status代表响应的状态 xhr代表XMLHttpRequest对象

$("#rs").load("/testuname",$(this).val());
//同样实现了发送异步请求到服务端，当服务器端成功返回的时候，将数据隐试的添加到load()方法的jQuery对象中的功能。等价于下面代码：
$.get("/testuname",$(this).val(),function(result){
  $("#rs").html(result);
},"text");

Json

概述：相比较XML起来是一种轻量级的数据交换格式，体积较小且易于阅读和编写同时也易于机器解析和生成

使用json定义对象的语法：

var json对象 = {key:value,key:value…} 取值方式：json对象.key || json对象[“key”]

注意：key必须是字符串，用双引号括起来，value可以是String,Number,boolean,null,对象,数组类型。

使用json定义数组的语法：

var json数组 = [value,value…] 取值方式：json对象[索引].key

举例：[{“age”:28,“name”:“李四”},{“age”:23,“name”:“王五”}]

Java解析或生成json对象需要导入对应jar包

//java --> json
User user = new User("张三",18,"广东","137510");
JSONObject jo = JSONObject.fromObject(user);
System.out.println(jo);
//json --> java
String resp = "{\"addr\":\"广东\",\"age\":18,\"name\":\"张三\",\"phone\":\"137510\"}";
JSONObject jsonObject = JSONObject.fromObject(resp);//先将字符串转为json对象
Object o = JSONObject.toBean(jsonObject, User.class);//再将json对象转为bean对象，使用反射bean对象必须要有无参构造器
System.out.println(o);
//java集合 --> json
ArrayList<User> al = new ArrayList();
al.add(new User("李四",28,"江西","1234"));
al.add(new User("王五",23,"江西","1314"));
JSONArray ja = JSONArray.fromObject(al);
System.out.println(ja);
//json --> java集合
String str = "[{\"addr\":\"江西\",\"age\":28,\"name\":\"李四\",\"phone\":\"1234\"},{\"addr\":\"江西\",\"age\":23,\"name\":\"王五\",\"phone\":\"1314\"}]";
JSONArray ja2 = JSONArray.fromObject(str);//先转为json对象
Object[] o1 = (Object[])JSONArray.toArray(ja2, User.class);//返回的是数组，必须强转为数组
for (Object u : o1){
    System.out.println(u);
}

南风吐月饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax与Json笔记

Ajax实现用户注册时验证用户名是否被使用概述：Ajax是在不重新加载整个页面的情况下(即“无刷新”技术)，向服务器发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页面的功能。可以使用XML、JSON、HTML等数据格式来封装请求或响应同步与异步的区别：同步是所有的操作都做完，才返回给用户结果；这样用户等待时间太长，用户体验不好。异步不用等所有操作都做完，就响应用户请求；即先响应用户请求，然后慢慢去写数据库，用户体验较好。需求：当用户名已被使用时，弹出框提示该用户名已被使用；若未被使
复制链接

扫一扫