2020-8-27 Ajax的使用

最新推荐文章于 2024-08-20 19:48:29 发布

Zan516

最新推荐文章于 2024-08-20 19:48:29 发布

阅读量278

点赞数

分类专栏： JAVA后端文章标签： ajax java javascript spring

本文链接：https://blog.csdn.net/Zan516/article/details/108271157

版权

JAVA后端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

补充内容
一、Ajax是什么？
二、使用步骤
- 1.引入JQuery文件
- 2.Ajax使用的格式
总结

补充内容

Ajax技术是后端开发人员必备的重点技术
注意：${pageContext.request.contextPath}为绝对路径；理解为：
http://localhost:8080/项目名
在绝对路径后面必须要加上/斜杠然后在加上controller的访问地址
${pageContext.request.contextPath}/jss/jquery-1.8.3.js
这个涉及到静态资源的知识这里就不多说了，路径的意思就是：访问项目下的jss目录下的jQuery文件

以下是本篇文章正文内容，下面案例可供参考

一、Ajax是什么？

Ajax是在浏览器上发送一个请求，而不用刷新浏览器
例如：浏览器输入一个字它会有很多选项弹出来

在这里插入图片描述
初学的时候一直要请求转发和重定向代码量太大使用Ajax技术大大降低开发时间

二、使用步骤

1.引入JQuery文件

代码如下（示例）：

<script type="text/javascript" src="${pageContext.request.contextPath}/jss/jquery-1.8.3.js"></script>

2.Ajax使用的格式

代码如下（示例）：

Ajax的格式有很多种：这里只展示两种（一种帮助理解，一种是开发常用）

实现功能：

第一种：
优点：仅次于初学者理解
缺点：繁琐的操作反正就是代码多就麻烦

 $.ajax({
        type:"post",  //post请求方式， 如果不写默认是get
        url:"${pageContext.request.contextPath}/abc", //此处是请求的Controller路径

        dataType:"json",//ajax传输的数据类型 json,text,html等 本人只记得这几个

        data:{"key":"value"},  //一个json数据的格式（键值对的形式）

    //回调函数 success成功的  意思就是请求成功就会执行这个回调函数

    success:function(data){
        console.log(data); //浏览器控制台输出controller return的数据 
    },
    //回调函数 error  见名识意   请求失败会调用此函数，新手建议写上
    error(){
		
    },
    })

第二种：（开发适用）
优点：格式简单，思路清晰、
缺点：初学者不容易理解

<script type="text/javascript">
function a1() {
   $.post("${pageContext.request.contextPath}/jsonn",{"name":$("#name").val()},function (data) {
      $("#sp").html(data);
    })
    }
</script>

另外所有的代码奉上（环境得你自己搭建哈，主要就是搭建好静态资源的访问就行了）

我使用的是SpringMVC开发所以springmvc的静态资源访问配置

不做过多说明，不能偏题哈

<!--  访问静态资源  -->
    <!-- 默认的注解映射的支持 -->
    <mvc:annotation-driven>
        <!-- 处理请求返回json字符串的中文乱码问题 -->
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <!-- 对静态资源文件的访问 -->
    <mvc:resources mapping="/html/**" location="/WEB-INF/html/" ></mvc:resources>
    <mvc:resources mapping="/img/**" location="/WEB-INF/img/"></mvc:resources>
    <mvc:resources mapping="/jss/**" location="/WEB-INF/jss/"></mvc:resources>

接下来是Controller的

package com.controller;

import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;
@Controller
public class HelloController {
    @RequestMapping("/jsonss")//访问这个controller中的jsonss  跳转到json.jsp上去
    public String json(){
        return "json";
    }
    @RequestMapping("/jsonn")//Ajax请求的路径
    @ResponseBody
    public String ujson(String name){//Ajax传过来的参数  参数名要和传过来的Key一致
        System.out.println(name);//控制台打印验证
        String msg = "";//一个空字符串
        if (null!=name){//判空操作
            if (name.equals("admin")){//如果我的传输数据是admin就设置msg的值为ok否则为错误
                msg = "ok";
            }else {
                msg = "错误";
            }
        }
        return msg;//然后返回这个字符串
    }


}

该展示一下json.jsp了

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<head>
    <title>Title</title>
</head>
<!-- 这里是引入JQuery文件 文章最前面的补充有说明  -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jss/jquery-1.8.3.js"></script>
<body>
        <form>
        <!-- 一个文本输入框 onblur失去焦点调用a1()函数 -->
        <input type="text" name="name" id="name" onblur="a1()">
        <!-- 用于展示效果的标签  如果是admin会显示ok 否则是错误 -->
            <span id="sp" style="color: red">1</span>
        </form>
</body>
<script type="text/javascript">
    function a1() {//函数
        $.post("${pageContext.request.contextPath}/jsonn",{"name":$("#name").val()},function (data) {
            $("#sp").html(data);
        })
    }
</script>
</html>

效果图：

初始化的界面：
在这里插入图片描述

成功的：

在这里插入图片描述
错误的：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Ajax的使用，Ajax技术其实很简单，也就是发送一个请求，获取controller返回的数据。上述例子就是最常见的注册时的用户名是否已存在，然后立即给出提示

学会了吗？学会就点个赞吧！感谢分享

Zan516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-8-27 Ajax的使用

文章目录补充内容一、Ajax是什么？二、使用步骤1.引入JQuery文件2.Ajax使用的格式总结补充内容Ajax技术是后端开发人员必备的重点技术注意：${pageContext.request.contextPath}为绝对路径；理解为：http://localhost:8080/项目名在绝对路径后面必须要加上/斜杠然后在加上controller的访问地址${pageContext.request.contextPath}/jss/jquery-1.8.3.js这个涉及到静态资源的知识这.
复制链接

扫一扫

专栏目录