济南小型网站建设适合穷人的18个创业项目投资小

当前位置： 首页 > news >正文

济南小型网站建设,适合穷人的18个创业项目投资小,网站怎么下载视频,平面设计网站大全有哪些目录 一、ajax概述

1. 概念
2. 实现方式 #xff08;1#xff09;原生的JS实现方式#xff08;了解#xff09; #xff08;2#xff09; JQeury实现方式 二、axios 介绍 三、axios使用
3. axios 发送get/post请求
4. axios验证用户名称是否存在 四、json
5. …目录 一、ajax概述
6. 概念
7. 实现方式 1原生的JS实现方式了解   2 JQeury实现方式 二、axios 介绍 三、axios使用
8. axios 发送get/post请求
9. axios验证用户名称是否存在 四、json
10. 概念
11. 语法 (1)   基本规则 2获取数据 五、 JSON数据和Java对象的相互转换 1. JSON转为Java对象 2. Java对象转换JSONjackson 3. fastjson用法 一、ajax概述 Ajax即Asynchronous Javascript And XML异步JavaScript和XML在 2005年被Jesse James Garrett提出的新术语用来描述一种使用现有技术集合的‘新’方法包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上而不需要重载刷新整个页面这使得程序能够更快地回应用户的操作。 参考 原生ajaxAJAX 简介 | 菜鸟教程
12. 概念 ASynchronous JavaScript And XML    异步的JavaScript 和 XML 异步和同步客户端和服务器端相互通信的基础上         * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。         * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。         通过在后台与服务器进行少量数据交换Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。         传统的网页不使用 Ajax如果需要更新内容必须重载整个网页页面。 提升用户的体验
13. 实现方式 1原生的JS实现方式了解   //1.创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixmlhttpnew XMLHttpRequest();}else{// code for IE6, IE5xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);}//2. 建立连接 /参数1. 请求方式GET、POST get方式请求参数在URL后边拼接。send方法为空参* post方式请求参数在send方法中定义2. 请求的URL3. 同步或异步请求true异步或 false同步*/xmlhttp.open(GET,ajaxServlet?usernametom,true);//3.发送请求xmlhttp.send();//4.接受并处理来自服务器的响应结果//获取方式 xmlhttp.responseText//什么时候获取当服务器响应成功后再获取//当xmlhttp对象的就绪状态改变时触发事件onreadystatechange。xmlhttp.onreadystatechangefunction(){//判断readyState就绪状态是否为4判断status响应状态码是否为200if (xmlhttp.readyState4 xmlhttp.status200){//获取服务器的响应结果var responseText xmlhttp.responseText;alert(responseText);}} 2 JQeury实现方式 a.  \(.ajax() * 语法\).ajax({键值对}); //使用\(.ajax()发送异步请求\).ajax({url:ajaxServlet1111 , // 请求路径type:POST , //请求方式//data: usernamejackage23,//请求参数data:{username:jack,age:23},success:function (data) {alert(data);},//响应成功后的回调函数error:function () {alert(出错啦…)},//表示如果请求响应出现错误会执行的回调函数dataType:text//设置接受到的响应数据的格式}); b. \(.get()发送get请求 * 语法\).get(url, [data], [callback], [type])                 * 参数                     * url请求路径                     * data请求参数                     * callback回调函数                     * type响应结果的类型 c.  \(.post()发送post请求             * 语法\).post(url, [data], [callback], [type])                 * 参数                     * url请求路径                     * data请求参数                     * callback回调函数                     * type响应结果的类型 二、axios 介绍 1.axios 是一个专注于网络请求的库核心负责发请求和拿数据 在后面的vue react都会用axios来请求数据类似于后端 httpclient 2.Axios是一个基于promise [5] 的网络请求库作用于node.js和浏览器中它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 3.Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库可以用于浏览器和 node.js 三、axios使用
14. axios 发送get/post请求 页面引入axios cdn依赖 script srchttps://unpkg.com/axios/dist/axios.min.js/script script srchttps://unpkg.com/axios/dist/axios.min.js/script// 1. 调用 axios 方法得到的返回值是 Promise 对象axios({// 请求方式method: GET,// 请求的地址url: 接口地址,// URL 中的查询参数params: {id: 1}}).then(function (result) {console.log(result)}) %–Created by IntelliJ IDEA.User: mayiktDate: 2022/6/8Time: 15:48To change this template use File | Settings | File Templates.–% % page contentTypetext/html;charsetUTF-8 languagejava % html headtitleaxios/titlescript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscriptfunction mayiktAxios() {// 1. 调用 axios 方法得到的返回值是 Promise 对象axios({// 请求方式method: GET,// 请求的地址url: http://localhost:8080/${pageContext.request.contextPath}/axiosServlet,// URL 中的查询参数params: {name: mayikt,age: 22}}).then(function (result) {alert(result.data);})}/script /head bodyinput typebutton value发送ajax onclickmayiktAxios()//body /html WebServlet(/axiosServlet) public class AxiosServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {PrintWriter writer resp.getWriter();String name req.getParameter(name);String age req.getParameter(age);writer.print(mayikt,name: name ,age: age);writer.close();} }2. axios验证用户名称是否存在 需求当我们用户输入用户名称之后会使用ajax验证用户名称是否已经存在 如果存在的话 则提示 该用户名称是已经存在的 onkeyup—监听用户输入完内容 走监听方法 WebServlet(/exUserNameServlet) public class ExUserNameServlet extends HttpServlet {private MayikUsertService mayikUsertService new MayikUsertService();Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(text/html;charsetutf-8);//1.获取到用户输入的userName参数值String userName req.getParameter(userName);//2.调用数据库根据userName查询用户名称是否存在MayiktUserEntity mayiktUserEntity mayikUsertService.findByUserName(userName);PrintWriter writer resp.getWriter();if (mayiktUserEntity ! null) {writer.print(该用户 userName 已经存在的 无法注册!);}writer.close();} }%–Created by IntelliJ IDEA.User: mayiktDate: 2022/6/6Time: 17:12To change this template use File | Settings | File Templates. –% % page contentTypetext/html;charsetUTF-8 languagejava % !DOCTYPE html html headtitle注册页面/titleform action/mayikt_session_war_exploded/register methodpostlabel用户名: /labelinput typetext nameuserName onkeyupmayiktAxios(this)/brlabel密nbspnbspnbsp码: /labelinput typepassword nameuserPwd/brlabel验证码: /labelinput typetext namecode/img idexchangecode srcVerifycodeServleta idecode href#看不清换一张图片/abrspan iderror stylecolor: red\({errorMsg}/spaninput typesubmit value注册//formscript typetext/javascriptwindow.onload function () {//获取img标签的对象img document.getElementById(exchangecode);img.onclick function () {//加时间戳,避免浏览器缓存var date new Date().getTime()img.src VerifycodeServlet? date;}//获取a标签的对象ec document.getElementById(ecode);ec.onclick function () {//加时间戳var date new Date().getTime()img.src VerifycodeServlet? date;}}/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscriptfunction mayiktAxios(object) {// 1.接受用户输入的userNamevar userName object.value;// 2.使用Axios 发送ajax请求验证 userName是否存在的axios({// 请求方式method: GET,// 请求的地址url: http://localhost:8080\){pageContext.request.contextPath}/exUserNameServlet,// URL 中的查询参数params: {userName: userName,}}).then(function (result) {//定位 span id 名称 error 修改document.getElementById(error).innerText result.data;})}/script /head /html 四、json
15. 概念 JavaScript Object Notation        JavaScript对象表示法 Person p new Person();     p.setName(张三);     p.setAge(23);     p.setGender(男); var p {name:张三,age:23,gender:男}; * json现在多用于存储和交换文本信息的语法     * 进行数据的传输     * JSON 比 XML 更小、更快更易解析。
16. 语法 (1)   基本规则 * 数据在名称/值对中json数据是由键值对构成的             * 键用引号(单双都行)引起来也可以不使用引号             * 值得取值类型                 1. 数字整数或浮点数                 2. 字符串在双引号中                 3. 逻辑值true 或 false                 4. 数组在方括号中    {persons:[{},{}]}                 5. 对象在花括号中 {address:{province陕西….}}                 6. null         * 数据由逗号分隔多个键值对由逗号分隔         * 花括号保存对象使用{}定义json 格式         * 方括号保存数组[] 2获取数据 a. json对象.键名         b. json对象[键名]         c. 数组对象[索引]         d. 遍历                  //1.定义基本格式                 var person {name: 张三, age: 23, gender: true};   var ps [{name: 张三, age: 23, gender: true},{name: 李四, age: 24, gender: true},{name: 王五, age: 25, gender: false}];//获取ps中的所有值for (var i 0; i ps.length; i) {var p ps[i];for(var key in p){alert(key:p[key]);}} !DOCTYPE html html langen headmeta charsetUTF-8titlejsonDemo/titlescript// 1.定义jsonvar json1 {name: mayikt, age: 22, isFlag: true};alert(json1.name);alert(json1.age);alert(json1.isFlag);// 2.定义json数组var jsonArr {code: 200, data: [{name: mayikt, age: 22}, {name: meite, age: 22}]};alert(jsonArr.code);alert(jsonArr.data[0].name);var userArr jsonArr.data;for (var i 0; i userArr.length; i) {alert(userArr[i].name , userArr[i].age);}/script /head body/body /html 五、 JSON数据和Java对象的相互转换 * JSON解析器         * 常见的解析器JsonlibGsonjackson    fastjson 1. JSON转为Java对象 1 导入jackson的相关jar包         2创建Jackson核心对象 ObjectMapper         3调用ObjectMapper的相关方法进行转换                   readValue(json字符串数据,Class) 2. Java对象转换JSONjackson 使用步骤 a. 导入jackson的相关jar包             b. 创建Jackson核心对象 ObjectMapper             c. 调用ObjectMapper的相关方法进行转换                 a 转换方法                     * writeValue(参数1obj):                         参数1                             File将obj对象转换为JSON字符串并保存到指定的文件中                             Writer将obj对象转换为JSON字符串并将json数据填充到字符输出流中                             OutputStream将obj对象转换为JSON字符串并将json数据填充到字节输出流中                     * writeValueAsString(obj):将对象转为json字符串 b注解                     JsonIgnore排除属性。                     JsonFormat属性值得格式化                             * JsonFormat(pattern yyyy-MM-dd) c复杂java对象转换                      List数组                      Map对象格式一致 3. fastjson用法 文档javaweb开发相关资料下载.notea 链接有道云笔记 public class Test01 {public static void main(String[] args) {//1.将数据对象变成json字符串类型MayiktUserEntity user1 new MayiktUserEntity(1, mayikt, mayikt);MayiktUserEntity user2 new MayiktUserEntity(1, mayikt, mayikt);String json1 JSONObject.toJSONString(user1);System.out.println(json1);//2.嵌套jsonJSONObject jsonObject new JSONObject();jsonObject.put(code, 200);jsonObject.put(msg, ok);//data值 数组类型ArrayListMayiktUserEntity mayiktUserEntities new ArrayList();mayiktUserEntities.add(user1);mayiktUserEntities.add(user2);jsonObject.put(data, mayiktUserEntities);System.out.println(jsonObject.toJSONString());} }package com.mayikt;import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSONPObject; import com.mayikt.entity.MayiktUserEntity;/*** author 余胜军* ClassName Test02* qq 644064779* addres www.mayikt.com* 微信:yushengjun644/ public class Test02 {public static void main(String[] args) {String jsonStr {\msg:\ok\,\code:200,\data:[{\id:1,\userName:\mayikt\,\userPwd:\mayikt},{\id:1,\userName:\mayikt\,\userPwd:\mayikt}]};// string类型—–jsonobject—-jsonobjectJSONObject jsonObject JSONObject.parseObject(jsonStr); // Integer code (Integer) jsonObject.get(code);Integer code jsonObject.getInteger(code);String msg jsonObject.getString(msg);System.out.println(code , msg);JSONArray data jsonObject.getJSONArray(data);for (int i 0; i data.size(); i) {JSONObject object (JSONObject) data.get(i);Integer id object.getInteger(id);String userName object.getString(userName);String userPwd object.getString(userPwd);MayiktUserEntity mayiktUserEntity new MayiktUserEntity(id, userName, userPwd);System.out.println(mayiktUserEntity);}} }package com.mayikt;import com.alibaba.fastjson.JSONObject; import com.mayikt.entity.Result;/** author 余胜军* ClassName Test03* qq 644064779* addres www.mayikt.com* 微信:yushengjun644/ public class Test03 {public static void main(String[] args) {String jsonStr {\msg:\ok\,\code:200,\data:[{\id:1,\userName:\mayikt\,\userPwd:\mayikt},{\id:1,\userName:\mayikt\,\userPwd:\mayikt}]};JSONObject jsonObject JSONObject.parseObject(jsonStr);Result result JSONObject.parseObject(jsonStr, Result.class);// java序列化技术 将 json变成对象System.out.println(result);} } package com.mayikt.entity;import java.util.List;/** author 余胜军* ClassName Result* qq 644064779* addres www.mayikt.com* 微信:yushengjun644*/ public class Result {private Integer code;private String msg;private ListMayiktUserEntity data;public Integer getCode() {return code;}public void setCode(Integer code) {this.code code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg msg;}public ListMayiktUserEntity getData() {return data;}public void setData(ListMayiktUserEntity data) {this.data data;}Overridepublic String toString() {return Result{ code code , msg msg \ , data data };} }axios({method: post,url: ${pageContext.request.contextPath}/user/addUser,data: JSON.stringify(userList),headers: {Content-Type: application/json;charsetUTF-8}}).then(resp {})