sql数据库环境网站搭建教程,网站开发项目计划书模板,坪地网站建设哪家好,wordpress图片抓取插件Axios是Ajax的一个框架,简化Ajax操作。需要axios.min.js 和vue.js的jar。发送普通参数异步请求以及相应异常情况客户端向服务器端异步发送普通参数值#xff1a;- 基本格式#xff1a; axios().then().catch()- 示例#xff1a;axios({ // axios表示要发送一个异步请求metho… Axios是Ajax的一个框架,简化Ajax操作。 需要axios.min.js 和vue.js的jar。发送普通参数异步请求以及相应异常情况客户端向服务器端异步发送普通参数值 - 基本格式 axios().then().catch() - 示例 axios({ // axios表示要发送一个异步请求 method : POST, //请求方式 url : ...., // 发送地址(发给谁) params:{ //带的参数 uname:lina, pwd:ok } }) .then(function ( value ){ }) //成功响应时执行的回调 value.data可以获取到服务器响应容 .catch(function(reason){}); //有异常时执行的回调reason.response.data可以获取到响应的内容 reason.message / reason.stack 可以查看错误的信息html代码div iddiv0uname:input typetext v-modeluname/brpwd:input typetext v-modelpwd/brbrinput typebutton value发送一个带普通请求参数值的异步请求 clickaxios01
/divAxios和vuescript languageJavaScript srcscript/vue.js/scriptscript languageJavaScript srcscript/axios.min.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vuenew Vue({el:#div0,data:{uname:lina,pwd:true},methods:{// 标签里面定义了 clickaxios01事件所以缺个方法进行处理axios01:function (){axios({ // 表示将要给服务器端发送一个异步的请求method:POST,url:axios01.do,params:{// this已经进入方法function内部了但是uname是vue里面的data的uname所以要用vueuname:vue.uname,pwd:vue.pwd}}).then(function (value) { //成功响应的时候 (回调)// 接收服务器端响应的数据console.log(value)}).catch(function (reason){ //出问题的时候执行console.log(reason)})}}});}/script效果所有请求参数都被放到URL地址后面了哪怕我们现在用的是POST请求方式。后端服务器代码WebServlet(/axios01.do)
public class Axios01Servlet extends HttpServlet {Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding(utf-8);// 获取参数String uname request.getParameter(uname);String pwd request.getParameter(pwd);System.out.println(unameuname);System.out.println(pwdpwd);response.setCharacterEncoding(utf-8);response.setContentType(text/html;charsetutf-8);
// 把两个值返回(响应)到客户端 PrintWriter out response.getWriter(); //得到一个打印流out.write(unameunamepwdpwd); //返回给客户端// 抛异常throw new NullPointerException(这里抛出空指针异常);}
}axios程序接收到的响应对象结构属性名作用config调用axios(config对象)方法时传入的JSON对象data服务器端返回的响应体数据headers响应消息头request原生JavaScript执行Ajax操作时使用的XMLHttpRequeststatus响应状态码statusText响应状态码的说明文本发送请求体为JSON格式 - 什么是JSONJSON是一种数据格式例如JSON格式表示两个学员信息的代码如下 [{sid:s001,age:18},{sid:s002,age:19}]特点 - JSON表达数据更简洁更能够节约网络带宽 客户端发送JSON格式的数据给服务器端: 1) 客户端中params需要修改成 data: 2) 服务器获取参数值不再是 request.getParameter()... 而是 StringBuffer stringBuffer new StringBuffer(); BufferedReader bufferedReader request.getReader(); String str null ; while((strbufferedReader.readLine())!null){ stringBuffer.append(str); } str stringBuffer.toString() ; 3) 我们会发现 str的内容如下 {uname:lina,pwd:ok} - 服务器端给客户端响应JSON格式的字符串然后客户端需要将字符串 转化成js Object 所需要的jargson 会把客户端发送来的json格式的 数据封装到对象中。 Gson gson new Gson(); - GSON有两个API --可以把某个json的字符串转换为所指定的类型 gson.fromJson( json字符串,需要转换的类型) --将java object转换成json字符串这样才能响应给客户端 gson.toJson(java Object) -响应客户端为json的时候要告诉客户端响应的内容是json格式数据 MIME-TYPE类型 第一个参数给谁发请求response.setContentType(application/json;charsetutf-8); - 客户端中如果获取的是字符串{} --js语言中 也有字符串和js对象之间互转的API string JSON.stringify(object) object -string object JSON.parse(string) string-objecthtml代码div iddiv0uname:input typetext v-modeluname/brpwd:input typetext v-modelpwd/brbrinput typebutton value发送一个带json格式的参数值的异步请求 clickaxios02
/divaxios和vue代码script languageJavaScript srcscript/vue.js/scriptscript languageJavaScript srcscript/axios.min.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vuenew Vue({el:#div0,data:{uname:lina,pwd:ok},methods:{// 标签里面定义了 clickaxios01事件所以缺个方法进行处理axios02:function (){axios({ // 表示将要给服务器端发送一个异步的请求method:POST,url:axios02.do,data:{ //用json格式就要把params转换为datauname:vue.uname,pwd:vue.pwd}}).then(function (value) { //成功响应的时候 (回调)// 接收服务器端响应的数据进行解析var datavalue.data;// console.log(data)//data对应的数据//{uname:lina,pwd:123}// 一点击输入框的值就改变vue.unamedata.uname;vue.pwddata.pwd;// 此处value中的data返回的是js object因此可以直接点出属性// 如果获取的是字符串{}// js语言中 也有字符串和js对象之间互转的API// string JSON.stringify(object) object -string// object JSON.parse(string) string-object}).catch(function (reason){ //出问题的时候执行console.log(reason)})}}});}/script服务器端代码WebServlet(/axios02.do)
public class Axios01Servlet extends HttpServlet {Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.获取客户端发送过来的参数
// 获取请求流 BufferedReader带一个缓冲的字符流 Reader字符流BufferedReader reader request.getReader();
// 准备一个StringBufferStringBuffer stringBuffernew StringBuffer();
// 从流里面读数据
// 准备临时字符串String strnull;
// 判断如果读到数据了就可以往一个 StringBuffer追加while ((strreader.readLine())!null){stringBuffer.append(str);strstringBuffer.toString(); // 得到客户端传过来的json格式的字符串
// 需要转换成JavaObject(封装到java对象中) 比如要注册功能string转换为User在调用UserDao保存数据库
// Gson有两个API
// 1. fromJson(string,T) 将字符串转换成java object
// 2. toJson(java Object) 将java object转化成json字符串这样才能响应给客户端Gson gsonnew Gson();User user gson.fromJson(str, User.class);System.out.print(user);
// 转换后 打印的是tostring类型 User{unamelina, pwdtrue}// 2. 响应给客户端
// 假设user是从数据库查询出来的现在需要将其转换成json格式的字符串然后响应给客户端user.setUname(a);user.setPwd(123);String userJsonStr gson.toJson(user);response.setCharacterEncoding(UTF-8);
// 响应给客户端之前要告诉客户端响应的内容是json格式的数据 所以叫做 MIME-type
// response.setContentType(text/html;charsetutf-8); //之前的response.setContentType(application/json;charsetutf-8); //现在的表示发送的是应用程序的jsonresponse.getWriter().write(userJsonStr);}}
}
