了解Ajax、语法以及如何使用

Ajax

1、什么是Ajax

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互更强的Web应用程序的技术。

Ajax的核心是XMLHttpRequest对象,也就是XHR,XHR向服务器发送请求和解析服务器的响应,能够以异步的方式从服务器获取新数据。

jQuery提供多个与AJAX有关的方法,能够使用HTTP Get 和 HTTP Post从远程服务器上请求数据,同时能够把这些数据直接载入到网页的元素中展示。

jQuery不是生产者,而是大自然的搬运工。

jQuery Ajax本质就是XMLHttpRequest,对他进行了封装,方便调用

增强B/S的体验性

2、Ajax可以做什么

  1. 注册时,输入用户名自动检测用户是否已经存在
  2. 登陆时,提示用户名密码错误

3、H5中使用Iframe理解Ajax(局部刷新)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪造Ajax</title>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>

<div>
    <p>请输入要加载的地址</p>
    <input type="text" class="linkAddress" value="https://www.baidu.com/">
    <input type="button" id="addIframe" onclick="btnClick()" value="加载链接放入iframe">
</div>

<div>
    <h3>加载页面地址</h3>
    <iframe style="width: 100%; height: 500px" id="iframe"></iframe>
</div>

</body>

<script>
    function btnClick(){
        //获取text文本框中的值
        const targetURL = $('.linkAddress').val();
        //将text中指赋值给iframe的src路径
        $('#iframe').attr('src', targetURL);
        // 下面通过原生js也可以给iframe的src路径赋值
        // document.getElementById("iframe").src = targetURL;
    }
</script>
</html>

4、简单应用

页面有个文本框,输入文字后,文本框失去焦点,ajax会向url接口路径发起请求,后端处理后返回结果

1、编写页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>
</head>
<body>
<%--onblur:鼠标失去焦点触发的事件--%>
<input type="text" id="txtVal" οnblur="pd()" placeholder="请输入文字">

<script>
    function pd() {
        <%--$.ajax默认是get请求--%>
        $.post({
            url:"${pageContext.request.contextPath}/ajax/a1",
            // data为封装的参数,键值对的形式,key:value
            data:{"txtVal":$('#txtVal').val()},
            success: function (returnData) {
                // returnData是接口返回的数据
                alert(returnData);
            }
        });
    }
</script>
</body>

</html>
2、编写后端
package com.smbms.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String txtVal = req.getParameter("txtVal");
        resp.getWriter().print("您好," + txtVal);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

3、效果

在这里插入图片描述

5、公式

  1. 原始写法
$.post({
    url:"${pageContext.request.contextPath}/ajax/a1",
    // data为封装的参数,键值对的形式,key:value
    data:{"txtVal":$('#txtVal').val()},
    success: function (returnData) {
        // returnData是接口返回的数据
        alert(returnData);
    }
});
  1. 简写
$.post(
    "${pageContext.request.contextPath}/ajax/a1",
    {"param1":"value1","param2":"value2"},
    function (returnData){方法体},"json"
);

6、实际应用

前端页面js编写

<script>
$.ajax({
            url: "/mk/sendInfoToLowCodeAndFile",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(contractInfo),
            success: function (returnData) {
                console.log(returnData);
                if(returnData.code === 200){
                    alert(returnData.msg);
                    window.location.href = "/index/success"
                }else {
                    alert(returnData.msg);
                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("Error: " + textStatus, errorThrown);
                alert("请求失败,请稍后再试。");
            }
        });
</script>

后端接口接收

@RequestMapping("sendInfoToLowCodeAndFile")
    public Result sendInfoToLowCodeAndFile(@RequestBody Contract contract) throws JsonProcessingException {
        return sendInfoToLowCodeService.sendInfoToLowCodeAndFile(contract);
    }
  • 19
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值