day83 AJAX

        1什么是AJAX    AJAX语法

AJAX = Asynchronous JavaScript and  XML         

            异步js和XML

实现页面某一部份更新,无需服务器转发或重定向

1  $.ajax()        


                语法:
                 $.ajax( {
                      "url"            :  "url",                      // 要提交的URL路径
                      "type"         :  "get",                     // 发送请求的方式
                      "data"         :  data,                      // 要发送到服务器的数据  name=value&name=value ,{ name: "John", time: "2pm" }
                      "dataType" :  "text",                   // 指定响应的数据类型 :text,JSON
                      "success"  :  function(result) { // 请求成功后要执行的代码  参数:result是服务器响应后的数据
                          },
                       "error"       :  function() {           // 请求失败后要执行的代码
                          }
                 } );


 2 $.get() 

  jQuery.get(url, [data], [callback], [type])
               

                参数:
                    url:待载入页面的URL地址

                    data:待发送 Key/value 参数。

                    callback:载入成功时回调函数。

                    type:返回内容格式,xml, html, script, json, text, _default。

3 $.post()


        jQuery.post(url, [data], [callback], [type])

        2AJAX的实现原理

                js内置的有XMLHttpRequest对象向服务器发送请求

                XMLHttpRequest也会接收服务器发送回来的文本(PrintWriter的out对象写出的文本)

               js接收到文本信息后对页面做相应的修改实现页面局部的动态修改

        3AJAX的核心对象,方法属性

   1  AJAX的核心 对象  : XMLHttpRequest
          2 创建XMLHttpRequest对象
                let xhr = new XMLHttpRequest();
          3 常用方法:
                open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
                        参数:
                            method:请求的类型;GET 或 POST
                                    get请求 :  url?name=value
                                                    send()
                                    post 请求 : 数据写在send(name=value)
                            url:文件在服务器上的位置
                            async:true(异步)或 false(同步)

                send(string) 将请求发送到服务器。
                        参数:
                         string:仅用于 POST 请求
          4 属性
                readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                                    0: 请求未初始化
                                    1: 服务器连接已建立
                                    2: 请求已接收
                                    3: 请求处理中
                                    4: 请求已完成,且响应已就绪

                status  :响应的状态码
                        200: "OK"
                        404: 未找到页面
          5 事件:
                onreadystatechange: 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
           6 响应
                responseText: 获得字符串形式的响应数据。

        4ajax实现步骤

       

匹配中文字符

let reg = /[\u4e00-\u9fa5]{1,}/;

5验证用户名是否可用,实现商品状态的改变

使用ajax,写js代码实现验证写死的用户名

                   根据get到的数据跑一遍服务器,服务器写值,ajax可以获取到该值实现js对页面的动态改变

<%--Created by IntelliJ IDEA.User: rkDate: 2024/4/22Time: 9:53To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>注册</title></head><body><form action="" >用户名 <input type="text" name="name" id="name" onblur="checkName()"><span id = "usertips" >用户名包含8-15位字母数字下划线不能以数字开头</span> <br>密码 <input type="password" name="password">昵称 <input type="text" name="nick"><input type="submit" value="提交"></form><input type="hidden" id="path" value="${pageContext.request.contextPath}"><script>let xhr = new XMLHttpRequest();let path = document.getElementById("path").value;function checkName(){let name = document.getElementById("name").value;let reg = /^[a-z][a-z\d]{7,14}$/iif (!reg.test(name)){document.getElementById("usertips").innerHTML = "用户名格式错误"document.getElementById("usertips").style.color = "red"return;}xhr.open(get,path+"/register?name="+name+"&time"+Math.random());xhr.send();xhr.onreadystatechange =getMsg}function getMsg(){if (xhr.readyState==4 && xhr.status==200){let str = xhr.responseTextif (str=="true"){document.getElementById("usertips").innerHTML = "用户名正确"document.getElementById("usertips").style.color = "green"}else {document.getElementById("usertips").innerHTML = "用户名重复"document.getElementById("usertips").style.color = "red"}}}</script></body>
</html>

 使用ajax,写jQuery代码实现匹配数据库的用户名

                                  根据get到的数据跑一遍服务器,服务器写值,ajax可以获取到该值实现js对页面的动态改变

$(function (){let path = $("#path").val()$("#name").blur(function (){let adname = $(this).val();let reg = /^[a-z][a-z\d]{1,15}$/ilet tipObj = $("#tips")if (!reg.test(adname)){tipObj.html("用户名格式有误").css("color","red")return;}console.log(adname);$.ajax({"url": path+"/Register","type": "get","data": {name:adname,t:Math.random()},"dataType":"text","success":function (result){if (result=="true"){$("#tips").html("用户名可用").css("color","green")}else {$("#tips").html("用户名bu可用").css("color","red")}}})})// $.ajax( {//     "url"            :  "url",                      // 要提交的URL路径//     "type"         :  "get",                     // 发送请求的方式//     "data"         :  data,                      // 要发送到服务器的数据  name=value&name=value ,{ name: "John", time: "2pm" }//     "dataType" :  "text",                   // 指定响应的数据类型 :text,JSON//     "success"  :  function(result) { // 请求成功后要执行的代码  参数:result是服务器响应后的数据//     },//     "error"       :  function() {           // 请求失败后要执行的代码//     }// } );//$.post  $get  // $.post(path+"/Register",{name:adname,t:Math.random()},function (result){//     if (result=="true"){//         $("#tips").html("用户名可用").css("color","green")//     }else {//         $("#tips").html("用户名bu可用").css("color","red")//     }// },"text")
})
<%--Created by IntelliJ IDEA.User: rkDate: 2024/4/16Time: 14:10To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html>
<head><title>注册</title></head>
<body>
<form action="${pageContext.request.contextPath}/Registure" method="post">
<%--    用户id<input type="text" name="id"> <br>--%>用户名 <input type="text" name="name" id="name"><span id="tips">注意用户名格式</span><br>密码 <input type="password" name="password"><span>${errMsg}</span><c:remove var="errMsg"></c:remove><br>昵称 <input type="text" name="nick"> <br><input type="submit" value="提交注册"><input type="reset" value="重置"> <br><input type="hidden" id="path" value="${pageContext.request.contextPath}"><a href="${pageContext.request.contextPath}/index.jsp">登录</a>
</form><script src="js/jquery-3.5.1.min.js"></script>
<script src="js/registerjQuery.js"></script>
</body>
</html>

 

 ajax动态修改员工在职状态,并动态修改离职操作不可再操作,变成文本信息。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/1717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库主从复制

一、主从复制概述 1、介绍&#xff1a; 主从复制是指将主数据库的 DDL 和 DML 操作写入到二进制日志中&#xff0c;将二进制日志传送到从库服务器&#xff0c;然后在从库上对这些日志重新执行&#xff08;重做&#xff09;&#xff0c;从而使得从库和主库的数据保持同步。 M…

百面算法工程师 | 分类网络总结

欢迎大家订阅我的专栏一起学习共同进步&#xff0c;主要针对25届应届毕业生 祝大家早日拿到offer&#xff01; lets go http://t.csdnimg.cn/dfcH3 目录 4. 经典分类网络与发展 4.1 AlexNet 4.2 VGGNet 4.3 GoogLeNet Inception 4.4 ResNet 4.5 DenseNet 4.6 MobileN…

C#中的浅拷贝(Shallow Copy)和深拷贝(Deep Copy),深拷贝的集中实现方式,浅拷贝深拷贝的案例

C#中的浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&#xff08;Deep Copy&#xff09; 拷贝就是创建一个对象&#xff0c;这个对象有着原始对象数据&#xff08;属性和字段&#xff09;的一份精确拷贝&#xff08;只针对Object和Array这样的引用数据类型&#xff09;…

截断堆积柱状图

本教程原文链接&#xff1a;截断堆积柱状图绘制教程 欢迎大家转载&#xff01;&#xff01;&#xff01;&#xff01; 本期教程 写在前面 堆积柱状图是柱状图的常见类型之一&#xff0c;也是平时使用概率较高的图形之一。我们前期发布了很多个柱状图的绘制教程&#xff0c;若你…

【工厂模式】简单工厂模式-简单例子

目录 一、简单介绍 二、未使用工厂模式之前 三、简单工厂模式 初始 优化 总结 一、简单介绍 工厂模式是一种软件设计模式&#xff0c;用于创建对象的方法。在工厂模式中&#xff0c;创建对象的逻辑被封装在一个单独的类中&#xff0c;该类负责根据特定条件或参数创建合适…

windows下使用命令uvicorn启动fastapi程序有乱码,方框形状奇怪字符

问题简述 执行命令uvicorn main:app --reload后出现的问题如图所示 这个问题非常容易解决&#xff01; 原因是windows控制台 默认未开启 ANSI颜色的支持 那么我们只需要开启就可以了 轻松解决 1 按下winR 打开运行 2 输入regedit 点击确定编辑注册表 3 新建值 值的名称为…

vue3组件封装系列-表单请求

我们在开发一些后台管理系统时&#xff0c;总是会写很多的列表查询页面&#xff0c;如果不封装组件&#xff0c;就会无限的复制粘贴&#xff0c;而且页面很冗余&#xff0c;正常情况下&#xff0c;我们都是要把组件进行二次封装&#xff0c;来达到我们想要效果。这里我分享一下…

《中学科技》是什么级别的刊物?如何投稿?

《中学科技》是什么级别的刊物&#xff1f;如何投稿&#xff1f; 《中学科技》创刊于1976年&#xff0c;由上海世纪出版&#xff08;集团&#xff09;有限公司主管&#xff0c;上海科技教育出版社有限公司主办的省级学术期刊&#xff0c;《中学科技》以传播科技知识、启迪智慧…

Centos安装软件失败There are no enabled repos.

这个错出现的原因可能是&#xff1a;没有先安装wget源&#xff0c;就把源给备份了 解决方案&#xff1a; 下载对应版本repo文件, 放入/etc/yum.repos.d/里&#xff0c;下载地址&#xff1a;CentOS镜像使用帮助 查看自己CentOS的版本&#xff0c;下载对应的repo文件&#xff…

spring boot中的标注@Component、@Service等

让我告诉你什么叫水货。 一、水货横行 一直以来&#xff0c;我对Spring Boot项目中的标注&#xff0c;像Component啦、Service啦、Configuration啦&#xff0c;甚至Autowired啦&#xff0c;等等&#xff0c;都似懂非懂。Autowired与Resource有什么区别也不清楚。 个中原因&a…

LearnOpenGL(三)之GLSL

一、GLSL 着色器是使用一种叫GLSL的类C语言写成的。 着色器的开头总是要声明版本&#xff0c;接着是输入和输出变量、uniform 和main函数。每个着色器的入口点都是main函数&#xff0c;在这个函数中 我们处理所有的输入变量&#xff0c;并将结果输出到输出变量中。 二、数据…

2-Embedding例子:简单NN网络、迁移学习例子(glove语料预训练)

一、简单例子&#xff1a;构造简单NN网络生成Embedding 1、pytorch例子 2、tensorflow例子 # 1导入模块 import tensorflow as tf from tensorflow.keras.models import Sequential from tensorflow.keras.layers import Embedding import numpy as np# 2构建语料库 corpus[[…

Linux命令接着学习

which命令&#xff0c;找到各种命令程序所处在的位置 语法&#xff1a;which查找的命令 那么对于我们想查找其他类型文件所在的位置&#xff0c;我们可以用到find命令 find命令 选项为-name&#xff0c;表示按照文件名进行查找 find命令中通配符 find命令和前面rm命令一样&…

MT3023 歌词中找单词

1.暴力 10/12 #include <bits/stdc.h> using namespace std; int n; string a[10005]; int main() {cin >> n;for (int i 0; i < n; i)cin >> a[i];string ll;cin >> ll;for (int i 0; i < n; i){string u a[i];int num 0;int j 0;for (in…

解线性方程组——追赶法解三对角方程组 | 北太天元

一、问题描述 对于线性方程组 A x b , A ( b 1 c 1 a 2 b 2 c 2 ⋱ ⋱ ⋱ ⋱ ⋱ ⋱ a n − 1 b n − 1 c n − 1 a n b n ) , b ( f 1 f 2 ⋮ f n ) Axb,\quad A\begin{pmatrix}b_1&c_1&&&&\\a_2&b_2&c_2&&&\\&\ddots&\d…

CentOS 7安装、卸载MySQL数据库(一)

说明&#xff1a;本文介绍如何在CentOS 7操作系统下使用yum方式安装MySQL数据库&#xff0c;及卸载&#xff1b; 安装 Step1&#xff1a;卸载mariadb 敲下面的命令&#xff0c;查看系统mariadb软件包 rpm -qa|grep mariadb跳出mariadb软件包信息后&#xff0c;敲下面的命令…

mysql基础14——视图

视图 视图是一种虚拟表 可以把一段查询语句作为视图存储在数据库中 需要的时候把视图看作一个表&#xff0c;对里面的数据进行查询 视图并没有真正存储数据 避免了数据存储过程中可能产生的冗余 提高了存储的效率 子查询 嵌套在另一个查询中的查询 派生表 如果在查询中…

六、项目发布 -- 4. 电子书详情页API开发、电子书列表API开发

电子书详情页API的编写 同理如下app.get中路由、回调&#xff1b;回调中要连接数据库、接收前端传过来的值、到数据库中做查询&#xff0c;然后回调&#xff08;如果回调失败返回什么JSON&#xff0c;如果回调成功返回什么JSON&#xff09;&#xff1b;最后千万别忘记了关闭数…

怎样快速打造二级分销小程序

乔拓云是一个专门开发小程序模板的平台&#xff0c;致力于帮助商家快速上线自己的小程序。通过套用乔拓云提供的精美模板&#xff0c;商家无需具备专业的技术背景&#xff0c;也能轻松打造出功能齐全、美观大方的小程序。 在乔拓云的官网&#xff0c;商家可以免费注册账号并登录…

全科都收!1区毕业水刊,影响因子狂涨至9.8,无预警记录!国人评价高!

本期&#xff0c;小编给大家解析的是一本创刊于2014年&#xff0c;且于同年被WOS数据库收录的毕业“水刊”——SCIENTIFIC DATA。 截图来源&#xff1a;期刊官网 SCIENTIFIC DATA&#xff08;ISSN&#xff1a;2052-4463&#xff09;是一本致力于数据的开放获取期刊&#xff0c…