JavaScript ---Ajax

最新推荐文章于 2024-08-07 21:58:12 发布

Stock01

最新推荐文章于 2024-08-07 21:58:12 发布

阅读量84

点赞数

分类专栏： JavaWeb 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/Stock01/article/details/120289133

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AJAX是什么

1.1Ajax简介
全称Asynchronous JavaScript And XML ,异步的JS和XML.
可以通过Ajax在浏览器去中向服务器发送异步请求,无刷新获取数据,按需加载.Ajax不是语言而是现有技术的组合而成的新使用方式.

1.2Ajax本质
Ajax是jQuery框架提供的一个前端和后端交互的方法,通过Ajax方法能够实现将数据传递到后端,然后自己定义成功传入数据后的网页的变化,其中请求和回复都是页面局部进行.
ajax = 传递数据 + 自己定义的方法

额外:1.4HTTP协议
http协议:超文本传输协议,一种约定,对请求和响应进行了提前规定.

request:
组成:
	行:	get/post	/s?ie=utf-8...	http/1.1(http的版本)
	头:	host:...		Cookie:...		Content-type:...
	空行:	(无内容)
	体: 	username=admin&password=123(get情况/post可为空)
response:
	行:	http/1.1	200(响应状态码) 
	头:	Content-type:...		Content-length:...		Content-encoding:...
	空行:		(无内容)
	体:	<html>...</html>

额外:1.2XML简介
可扩展的标记语言,用来传输和存储数据,与HTML相似,但都是预定标签,通过标签来判断做什么.

使用Ajax

1.导入jQuery框架(cdn或者本地导入)
2.编写对应处理的Controller,返回消息或者字符串或者json格式的数据.
3.编写ajax请求

url:Controller请求
data:键值对
success:回调函数
4.给ajax绑定事件:点击,失去焦点,键盘弹起

ajax方法的主要参数解释:

url:请求发送过去的地址,
(将数据包装成符合http协议的请求体,将其发送到对应的地址,这个地址对应的servlet或者controller会获得此请求体执行操作)
type:要求为String类型的参数，请求方式（post或get）默认为get
success:执行url成功后的回调函数(执行成功后就会执行的函数),其中有两个参数,
data:封装了服务器的返回的数据
status:状态

总结一下ajax的使用格式

$.ajax({
	url:"${pageContext.request.contextPath}/与对应的Controller的连接",
	data:{"与对应的Controller参数相同":前端获得的数据},
	success:function(){//回调函数可以将data,status作为参数
		//成功后要执行的前端代码
	}
})

$.post("url",data,funcation(){//成功后要执行的前端代码})
//其中只有url参数必定要放入函数.

应用一:文本框输入和后他相同的正确值后执行输出true/false

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
<%--    注意导入JQuery是需要相对路径的,否者会找不到--%>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js">
    </script>
    <script>
      function a(){
        //将文本框输入的值发送给服务器,服务器返回数据
        //获得文本框数据
        let username = document.getElementById('username').value;
        //用jQuery中的Ajax方法将数据发送到对应的URL

        $.ajax({//ajax方法默认提交方式是get请求,可以添加参数 type:post改为post,或者直接换成post
          url: "${pageContext.request.contextPath}/a1",
          data: {"name":username},
          success:function (data,status){
            console.log(data);
            console.log(status);
          }
        })


        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data){
            alert(data);
          }
        })
      }

    </script>
  </head>
  <body>
<%--οnblur="a()":失去焦点就执行函数a()--%>
  用户名:<input type="text" id="username" οnblur="a()">
  </body>
</html>

对应的Controller

@Controller
public class AjaxController {
    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param:"+ name);
        if("ccc".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

应用二:点击按钮获得数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <title>数据展示</title>
</head>
<body>

<input type="button" id="btn" value="获取数据">
<table style="width: 80%;align-content: center">
  <tr>
    <td>姓名1</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tbody id="content">

  </tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<%--在jsp文件中单独自闭合没有效果,会报错--%>
<script>
    let btn = document.getElementById('btn');
    console.log("aaa");
    btn.onclick = function (){
        console.log("bbb");
        //ajax的另外的参数写法
        $.post("${pageContext.request.contextPath}/a2",function (data){
            console.log(data);
            let html = "";
            for (let i = 0; i < data.length; i++) {
                html += "<tr>"+
                    "<td>"+data[i].name+"</td>"+
                    "<td>"+data[i].age+"</td>"+
                    "<td>"+data[i].sex+"</td>"+
                +"</tr>";
            }
            $("#content").html(html);
        })
    }
</script>

</body>
</html>

对应的Controller

@Controller
public class AjaxController {
	public List<User> a2(){
        ArrayList<User> userList = new ArrayList<>();

        userList.add(new User("aaa",1,"男女"));
        userList.add(new User("bbb",1,"男女"));
        userList.add(new User("ccc",1,"男女"));

        return userList;
    }
}

**应用三:**判断输入的账户密码是否正确

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

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"name":$("#name").val()},
                success:function (data){
                    if(data.toString()==='ok'){
                        $("#userInfo").css("color","green");
                    }
                    $("#userInfo").html(data)
                }
            })
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if(data.toString()==='ok'){
                        $("#pwdInfo").css("color","green");
                    }
                    $("#pwdInfo").html(data)
                }
            })
        }
    </script>
</head>
<body>
<p>
    user:<input type="text" id="name" οnblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    pwd:<input type="text" id="pwd" οnblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

对应的Controller

@Controller
public class AjaxController {
	@RequestMapping("/a3")
    @ResponseBody
    public String a3(String name,String pwd){
        String msg = "";
        if(name != null){
            if("admin".equals(name)){
                msg="ok";
            }else {
                msg="用户名有误";
            }
        }
        if(pwd != null){
            if("123".equals(pwd)){
                msg="ok";
            }else {
                msg="密码有误";
            }
        }
        return msg;
    }
}

Stock01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ---Ajax

第一章:原生的AJAX1.1Ajax简介全称Asynchronous JavaScript And XML ,异步的JS和XML.可以通过Ajax在浏览器去中向服务器发送异步请求,无刷新获取数据,按需加载.Ajax不是语言而是现有技术的组合而成的新使用方式.1.2XML简介可扩展的标记语言,用来传输和存储数据,与HTML相似,但都是预定标签1.3Ajax的优缺点无刷新获取数据,按事件加载页面.没有浏览历史,不能回退,存在跨域问题,对SEO不友好.1.4HTTP协议http协议:超文本传
复制链接

扫一扫

专栏目录