初见Ajax的认知与理解 二

AJAX（Asynchronous JavaScript And XML 异步的JavaScript和XML）

上期说要新添一个需求：新增一个修改密码的接口，前端再增加一个修改密码的页面，请求和返回都使用JSON，要求复用数据库连接，合并读取html文件。

1、新增一个修改密码的接口

UserMapper接口部分：

package com.example.mapper;

import com.example.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserMapper {
    User selectAll(@Param("userName")String username, @Param("passWord")String password);

    int update(User user);
}

添加UserMapper的xml文件：







    
    
        update user set password = #{passWord} where username = #{userName};

2、在前端新增一个修改密码的页面

创建一个ajax-demo2.html




修改密码

    
    
    
        

            
修改密码

要实现从ajax-demo.html页面跳转到ajax-demo2.html上的功能，就得在ajax-demo.html上增加一个修改密码按钮并实现跳转。
ajax-demo.html：








    
校验

在DemoApplication部分，让hello2读取ajax-demo2.html文件。

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
    String flag = null;
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
    /*
    * 实现账号密码校验的功能
    * */
    @RequestMapping("/addUser2")
    public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(result);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        //登入
        String userName = people.userName;
        String passWord = people.passWord;
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        User users =userMapper.selectAll(userName, passWord);
        System.out.println(users);
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //数据库数据与userName、passWord做比较
        boolean flag = false;
        if (users != null) {
            flag = true;
        } else {
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
    /*
    * 读取ajax-demo2.html
    * */
    @GetMapping("/hello1")
    public String hello1() {
        String str ;
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
            while ((str = in.readLine()) != null) {
                System.out.println(str);
                htmlStr  =htmlStr + "\n" +str;
            }
            System.out.print(htmlStr);
        } catch (IOException e) {
            System.out.print("错误");
        }
        return htmlStr;
    }
    @GetMapping("/hello2")
    public String hello2() {
        String str ;
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
            while ((str = in.readLine()) != null) {
                System.out.println(str);
                htmlStr  =htmlStr + "\n" +str;
            }
            System.out.print(htmlStr);
        } catch (IOException e) {
            System.out.print("错误");
        }
        return htmlStr;
    }
}

测试一下：初见Ajax的认知与理解 二_第1张图片初见Ajax的认知与理解 二_第2张图片

3、请求和返回都使用JSON

ajax-demo2.html通过单击事件执行asd()，将浏览器的数据提交到服务端（/addUser3）。并添加返回功能返回到校验界面。
ajax-demo2.html部分




修改密码

    
    
    
        

            
修改密码

DemoApplication部分：
添加addUser3 实现修改密码的功能

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
    /*
    * 实现账号密码校验的功能
    * */
    @RequestMapping("/addUser2")
    public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(result);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        //登入
        String userName = people.userName;
        String passWord = people.passWord;
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        User users =userMapper.selectAll(userName, passWord);
        System.out.println(users);
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //数据库数据与userName、passWord做比较
        boolean flag = false;
        if (users != null) {
            flag = true;
        } else {
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
    /*
    * 读取ajax-demo2.html
    * */
    @GetMapping("/hello1")
    public String hello1() {
        String str ;
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo.html"));
            while ((str = in.readLine()) != null) {
                System.out.println(str);
                htmlStr  =htmlStr + "\n" +str;
            }
            System.out.print(htmlStr);
        } catch (IOException e) {
            System.out.print("错误");
        }
        return htmlStr;
    }
    @GetMapping("/hello2")
    public String hello2() {
        String str ;
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/ajax-demo2.html"));
            while ((str = in.readLine()) != null) {
                System.out.println(str);
                htmlStr  =htmlStr + "\n" +str;
            }
            System.out.print(htmlStr);
        } catch (IOException e) {
            System.out.print("错误");
        }
        return htmlStr;
    }
    /*
    * 实现修改密码的功能
    * */
    @RequestMapping("/addUser3")
    public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
        String contentType = request.getContentType();
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(contentType);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        String userName = people.userName;
        String passWord = people.passWord;
        //修改密码
        User user = new User();
        user.setUserName(userName);
        user.setPassWord(passWord);
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        int update = userMapper.update(user);
        System.out.println(update);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //判断数据库是否做出修改
        boolean flag = false;
        if (update !=0) {
            flag = true;
        } else {//update为0则没有做出修改
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
}

测试一下
初见Ajax的认知与理解 二_第3张图片初见Ajax的认知与理解 二_第4张图片
结果符合预期。
流程跑通畅了，接下来就该思考如何将两次读取文件的操作合并（hello1和hello2）。

4、合并两次读取文件的操作

为什么要合并读取文件的操作呢？别看现在的需求要读取的文件少，比较方便。那万一以后的需求要读取几十个文件呢？我得读取一个文件就得写一次，那还得了。

那该怎么实现合并这个操作呢？
拼接字符串似乎是一个不错的选择。将要拼接的部分（ajax_demo.html、ajax_demo2.html）相似的地方提取出来，不一样的地方通过传参的方式返回不就行了吗？说干就干。
我们创建一个hello3，定义一个String类型的变量a（这个变量的值通过传参的方式获得），将相似的部分用字符串写死，不一样的部分通过变量a替代（"src/webapp/"+a +".html"）。
DemoApplication部分：

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
    String flag = null;
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
    @RequestMapping("/hello3")
    public String hello3( HttpServletRequest request) throws IOException {
        String flag = request.getParameter("flag");
        String a = "";
        System.out.println(flag);
        if (flag == null){//只会执行一次，做为变量a没有传递回来之前的默认值。
            a ="ajax-demo";
        }else{
            a = flag;
        }
        System.out.println(a);
        String str ="";
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
            while ((str = in.readLine()) != null) {
                htmlStr  =htmlStr + "\n" +str;
            }
        } catch (IOException e) {
            System.out.print("错误");
        }
        System.out.println(htmlStr);
        return htmlStr;
    }
    /*
    * 实现账号密码校验的功能
    * */
    @RequestMapping("/addUser2")
    public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(result);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        //登入
        String userName = people.userName;
        String passWord = people.passWord;
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        User users =userMapper.selectAll(userName, passWord);
        System.out.println(users);
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //数据库数据与userName、passWord做比较
        boolean flag = false;
        if (users != null) {
            flag = true;
        } else {
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
    /*
    * 实现修改密码的功能
    * */
    @RequestMapping("/addUser3")
    public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
        String contentType = request.getContentType();
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(contentType);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        String userName = people.userName;
        String passWord = people.passWord;
        //修改密码
        User user = new User();
        user.setUserName(userName);
        user.setPassWord(passWord);
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        int update = userMapper.update(user);
        System.out.println(update);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //判断数据库是否做出修改
        boolean flag = false;
        if (update !=0) {
            flag = true;
        } else {//update为0则没有做出修改
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
}

html部分：
以ajax-demo.html举例：
在tz()下将ajax-demo2.html使用post请求将数据传递给/hello3.



    
    
    
        

            
校验

ajax-demo2.html同上。
测试一下！
在浏览器上输入http://localhost:8080/hello3;
初见Ajax的认知与理解 二_第5张图片初见Ajax的认知与理解 二_第6张图片初见Ajax的认知与理解 二_第7张图片初见Ajax的认知与理解 二_第8张图片初见Ajax的认知与理解 二_第9张图片初见Ajax的认知与理解 二_第10张图片
ok，功能没有问题，接下来就是复用数据库连接了。咱只要把加载数据库等信息放入构造函数中，然后在需要使用的时候引用这个构造函数即可。

5、复用数据库连接

创建一个构造函数Sql

package com.example;
public class Sql {
    SqlSessionFactory Sql() throws IOException {
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        return sqlSessionFactory;
    }
}

然后将DemoApplication中配置数据库的部分一一替代：

package com.example;
@SpringBootApplication
@RestController
public class DemoApplication {
    String flag = null;
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
    @RequestMapping("/hello3")
    public String hello3( HttpServletRequest request) throws IOException {
        String flag = request.getParameter("flag");
        String a = "";
        System.out.println(flag);
        if (flag == null){//只会执行一次，做为变量a没有传递回来之前的默认值。
            a ="ajax-demo";
        }else{
            a = flag;
        }
        System.out.println(a);
        String str ="";
        String htmlStr="";
        try {
            BufferedReader in = new BufferedReader(new FileReader("src/webapp/"+a +".html"));
            while ((str = in.readLine()) != null) {
                htmlStr  =htmlStr + "\n" +str;
            }
        } catch (IOException e) {
            System.out.print("错误");
        }
        System.out.println(htmlStr);
        return htmlStr;
    }
    /*
    * 实现账号密码校验的功能
    * */
    @RequestMapping("/addUser2")
    public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException {
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line); 
            result  =result + "\n" +line;
        }
        System.out.println(result);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        //登入
        String userName = people.userName;
        String passWord = people.passWord;
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        Sql sql = new Sql();
        SqlSession sqlSession = sql.Sql().openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        User users =userMapper.selectAll(userName, passWord);
        System.out.println(users);
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //数据库数据与userName、passWord做比较
        boolean flag = false;
        if (users != null) {
            flag = true;
        } else {
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
    /*
    * 实现修改密码的功能
    * */
    @RequestMapping("/addUser3")
    public People addUser3( HttpServletRequest request, HttpServletResponse response) throws IOException {
        String contentType = request.getContentType();
        ServletInputStream is = request.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String line=null;
        String result="";
        while((line=br.readLine())!=null){
            System.out.println(line);
            result  =result + "\n" +line;
        }
        System.out.println(contentType);
        //提取JSON中的值
        ObjectMapper mapper = new ObjectMapper();
        People people = mapper.readValue(result,People.class);
        String userName = people.userName;
        String passWord = people.passWord;
        //修改密码
        User user = new User();
        user.setUserName(userName);
        user.setPassWord(passWord);
        //查询数据库
        String resource = "mybatis-config.xml";
        InputStream inputStream = Resources.getResourceAsStream(resource);
        SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        //2.获取SqlSession对象
        Sql sql = new Sql();
        SqlSession sqlSession = sql.Sql().openSession();
        //3.获取Mapper接口的代理对象
        UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
        //4.执行方法
        int update = userMapper.update(user);
        System.out.println(update);
        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
        System.out.println(result);
        //判断数据库是否做出修改
        boolean flag = false;
        if (update !=0) {
            flag = true;
        } else {//update为0则没有做出修改
            flag = false;
        }
        //返回一个Boolean
        response.getWriter().write("" + flag);
        return null;
    }
}

大功告成，可以使用 show ststus like 'Threads%'; 可以在MySQL命令行中查看数据库连接的情况。

你可能感兴趣的:(ajax)

  • 学会这招！用python爬取微博评论（无重复数据） Python白白白白
    python爬取微博评论（无重复数据）前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流，切勿用于非法用途！！！前言前段时间微博上关于某日记的评论出现了严重的两极分化，出于好奇的我想对其中的评论以及相关用户做一
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • ajax的同源策略 Spring_Bear
    问题之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。同源策略简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：目前，如
  • Mybatis实现员工管理系统 wu1113_ mybatisjavamaven
    文章目录1.案例需求2.编程思路3.案例源码4.小结1.案例需求在上次做的父子模块的maven以及Ajax实现人工管理系统的基础上使用Mybatis实现员工管理系统的增删改查，具体运行效果如下：2.编程思路Mybatis框架的一般执行流程：创建MyBatis配置文件mybatis-config.xml在里面加载数据源、事务等，管理映射文件创建需要的映射文件mapper.xml，用于映射表中列和实体
  • java ajax_Java Ajax入门 孤独患喆 javaajax
    接下来整理一下Ajax相关的内容，AJAX(asynchronousjsandxml)，即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。同步和异步同步和异步的主要区别如下；(1)同步：一个响应结束后才能发送下一个请求，页面在请求期间不能做其他事情。(2)异步：不
  • html加载界面发送ajax请求 足球数据分析 htmlajax前端
    html加载界面发送ajax请求makeAjaxRequest();functionmakeAjaxRequest(){varxhr=newXMLHttpRequest();//创建一个新的XMLHttpRequest对象xhr.open('GET','yourUrlPath',true);//配置请求，设置请求类型、URL和是否异步xhr.send();//发送请求}
  • ajax 获取一步数据,ajax异步获取数据 可可子姐姐教英语 ajax获取一步数据
    functioncreateXHR(){if(typeofXMLHttpRequest!="undefined"){returnnewXMLHttpRequest();}elseif(typeofActiveXObject!="undefined"){varversion=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];fo
  • 招银网络&大疆&元象一面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，XHR、axios和fetch这三者的区别是什么？axios和fetch的底层实现是什么？axios拦截器是什么？axios提供了哪些配置或功能，是fetch和XHR中没有的？你的回答中不要写出示例代码。XHR、axios和fetch的区别XHR(XMLHttpRequest)历史：XHR是最早的AJAX技术，由微软在1999年引入，后来被标准化。兼容性：几乎所有现代浏览器
  • ajax讲解 夜不眠，码三千 okhttp
    1.AJAX概述1.1什么是ajaxAJAX（AsynchronousJavascriptAndXML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过
  • AJAX异步请求数据 铸键为犁 JavaWebajaxservletjavascript
    文章目录前言一、AJAX是什么？二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么？异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下：$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat
  • 解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据 微特尔普拉斯 ajaxjavascriptajax前端javascript
    在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是AJAX（AsynchronousJavaScriptandXML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。在AJAX出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS
  • 【前端】Vue服务器端渲染之Nuxt irenb
    1.什么是服务器端渲染后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。总结：数据填充在服务器端进行，就是服务器端渲染什么是客户端渲染数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染。总结：数据填充在客户端进行，就是客户端渲染服务器端渲染vs客户端渲染服务器端渲染需要消
  • 前后端分离，Asp.net core webapi 如何配置跨域 代码掌控者 C#asp.netcore.netcore经验分享c#
    前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
  • vue基本语法 多啦爱梦的梦想 vue
    VUEday01异步函数和回调函数何为异步函数：不会马上执行，需要特定的时机执行的函数，由于是异步的，不会阻塞主线程代码的执行异步函数有哪些：ajax请求，定时器，延时器，文件读取何为回调函数：把一个函数当作参数传递，将来特定的时机调用，这个函数就是回调函数，一般异步操作，都会用到回调函数例如：setTimeout(()=>{console.log(2)},1000)==>定时器里面的打印2不会立
  • Python全栈 part02 - 006 Ajax drfung
    JSON定义:JSON(Javascriptobjectnotation,JS对象标记)是一种轻量级的数据交换格式;是基于ECMASCript(w3cjs规范)的一个子集.JS-JSON-Python.pngJSON对象定义需要注意的点属性名必须用"(双引号)不能使用十六进制值不能使用undefined不能使用函数名和日期函数stringify与parse方法JSON.parse()将一个JSON
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • 利用jQuery框架的ajax请求获取json格式的数据 听海边涛声 jqueryajaxjson
    Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
  • python中selenium中使用ajax_使用selenium和python捕获AJAX响应 weixin_39946534
    我曾经截获了一些使用selenium向页面注入javascript的ajax调用.历史的不好的一面是,硒有时可能是,说“脆弱”.因此,无论如何我在进行注射时都会遇到硒异常.无论如何,我的想法是拦截XHR调用,并将其响应设置为我创建的一个新的dom元素,我可以从selenium操作.在拦截的条件下,你甚至可以使用发出请求的url来拦截你真正想要的那个(self._url)也许这有帮助.browser
  • 前端Axios搭配Vue（认清Axios，Axios结合Vue发出Ajax请求，返回JSON数据案例！简洁易懂。） 酸奶代码 前端vue.jsjavascriptjsonajax
    一.什么是Axios1.axios是独立于vue的一个项目，不是Vue的一部分2.axios通常和Vue一起使用，实现Ajax操作3.Axios是一个基于promise的HTTP库axios官方文档二.引入Axios库文件1.可以直接引用2.可以下载Axios的js文件导入下载此js文件三.使用Axios配合Vue发出Ajax请求案例在Vue中使用Axios，向服务器发送Ajax请求，将获取的js
  • java读取MultipartFile文件excel文件内容 八月林城 javaexcel
    java读取MultipartFile文件excel文件内容@PostMapping("/importData")publicAjaxResultimportData(@RequestPart(name="file",value="file")MultipartFilefile)throwsException{ExcelUtilutil=newExcelUtilvehicleModelVos=ne
  • 揭秘Nginx架构-10000并发连接背后的秘密 w风雨无阻w Nginxnginx架构运维
    在当今移动互联网时代,网站的高并发、高性能成为了决胜关键。作为一款出色的开源Web服务器,Nginx以其非凡的高并发处理能力成为了架构师的利器。让我们一同揭开Nginx源码的神秘面纱,探索它高效处理海量请求的秘密。一、为何高并发是如此重要?2000年代以来,随着PC、移动设备的普及,互联网用户数激增。网站的并发连接数也随之大幅提高,常见的网站要承载数十万甚至上百万的并发请求。与此同时,Ajax和H
  • 瑞吉外卖——购物车（移动端） 小杰不想秃头 瑞吉外卖项目javaajax开发语言
    需求分析移动端用户可以将菜品或套餐加入购物车。对于菜品来说，如果添加了菜品口味信息，则需要选择规格后才能加入购物车；对于套餐来说，可以直接点击加号将当前套餐加入购物车。在购物车中可以修改套餐或菜品的数量，也可以清空购物车。数据模型需要操作shopping_cart表。代码开发前后端交互过程：点击加入购物车或者加号按钮，页面发送ajax请求，将菜品或套餐加入购物车。点击购物车按钮，页面发送ajax请
  • jQuery中的ajax通信技术的讲解 盛夏绽放 jqueryajaxokhttp
    jQuery提供了多种方法来处理AJAX请求，这些方法简化了异步请求的创建和处理。以下是一些常用的jQueryAJAX方法及其演示：1.$.ajax()（1）解释这个方法是最基础也是最强大的AJAX方法，它可以接受一个配置对象来构建并发送HTTP请求。（2）示例：这是一个GET请求模版$.ajax({url:'https://api.example.com/data',//请求的URL地址type
  • iview前端向后端传数据一直转圈_记一次开发过程当中，iview遇到的一些坑以及解决办法... weixin_39641450
    写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程当中遇到的问题。前端一、Modal关闭问题vue需求背景：modal框里面是个form表单，点击肯定以后，先验证form表单，验证经过则关闭modal框，验证不成功则提示用户，不关闭。ajax问题描述：原本刚开始想经过modal框v-model绑定的值(true或false)来进行控制，手动改以后，报错。后
  • ajax上传文件报错The current request is not a multipart request的解决办法 BigDataGeek ajaxhtmljavawebjquery
    ajax上传文件报错Thecurrentrequestisnotamultipartrequest的解决办法主要报错语句为：Thecurrentrequestisnotamultipartrequestspring在处理入参的时候，遇到MultipartFile相关就会先去校验。（在controller中会用MultipartFile接受参数）1、当在form中提交的信息包含file的时候，必须要
  • 18day2018-07-30 杜大个
    常用参数：1、url请求地址2、type请求方式，默认是'GET'，常用的还有'POST'3、dataType设置返回的数据格式，常用的是'json'格式，也可以设置为'html'4、data设置发送给服务器的数据5、success设置请求成功后的回调函数6、error设置请求失败后的回调函数7、async设置是否异步，默认值是'true'，表示异步；ajax,是前端与后台连接的地方；表单文件中g
  • 记录-小程序720°VR（跳转H5页面实现） 久违的小技巧 小程序小程序vrjavascript
    全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
  • 前端篇—ajax wolf67 Djangodjangojsajax
    文章目录前言一、基于JS的ajax实现1.1基础1.2完整代码示例1.3应用二、JSON和JSONP2.1什么是JSON2.2JSON语法2.3应用2.4json与django交互2.5json与xml比较三、基于jQuery的ajax实现3.1基础方法3.2快捷方法用法示例四、跨域请求4.1同源机制4.2jsonp的js实现（未完成）4.3jsonp的jQuery实现4.4jsonp的ajax实
  • Ajax的简介和使用 m0_72131231 ajax前端
    一、Ajax简介AJAX全称为AsynchronousJavaScriptAndXML，就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。1、XML简介XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定
  • Ajax 解决回调竞争 wangyue4 ajax前端javascript
    回调的竞争，即多次快速点击同一按钮导致多个异步的AJAX请求同时返回，导致数据更新顺序混乱。这种情况在异步编程中很常见，特别是前端开发时，AJAX请求的回调并不保证按顺序执行。$.ajaxSetup()可以设置全局的beforeSend和complete回调函数，这样每个AJAX请求在发送前和完成后都可以执行相应的逻辑。letisRequestPending=false;$.ajaxSetup({
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他