怎么网站改版,网站的收录,广告推广软件,小程序小游戏开发AJAXJSON 概念#xff1a;AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML AJAX作用#xff1a; 与服务器进行数据交换#xff1a;通过AJAX可以给服务器发送请求#xff0c;并获取服务器响应的数据 使用了AJAX和服务器进行通信#xff0c;就可以使用H…AJAXJSON 概念AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML AJAX作用 与服务器进行数据交换通过AJAX可以给服务器发送请求并获取服务器响应的数据 使用了AJAX和服务器进行通信就可以使用HTMLAJAX来替换JSP页面了 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用验等等.…
AJAX快速入门 编写AjaxServlet,并使用response输出字符串 创建XMLHttpRequest对象用于和服务器交换数据 var xmlhttp;
if (window.XMLHttpRequest){//code for IE7,Firefox,Chrome,Opera,Safarixmlhttp new XMLHttpRequest();
}else{// code for IE6,IE5xmlhttp new ActiveXObject(Microsoft.XMLHTTP);
}向服务器发送请求 xmlhttp.open(GET,url); //这里url必须写全路径http://...
mlhttp.send(); //发送请求获取服务器响应数据 xmlhttp.onreadystatechange function (){if(xmlhttp.readyState 4 xmlhttp.status 200){alert(xmlhttp.responseText);}
}案例
使用AJAX验证用户名是否存在
需求在完成用户注册时当用户名输入框失去焦点时校验用户名是否在数据库已存在
前端代码如下
// 1.给用户名输入框绑定光标失去焦点事件onblur
// 2.发送ajax请求携带username参数
// 3.处理响应是否显示提示信息
//1.给用户名输入框绑定失去焦点事件
document.getElementById(username).onblur function (){//2.发送ajax请求//获取用户名的值var username this.value;//2.1.创建核心对象var xhttp;if (window.XMLHttpRequest){xhttp new XMLHttpRequest();}else{// code for IE6,IE5xhttp new Activexobject(Microsoft.XMLHTTP);}//2.2.发送请求xhttp.open(GET,http://localhost:8080/ajax-demo/selectUserServlet?usernameusername);xhttp.send();//2.3.获取响应xhttp.onreadystatechange function(){if (this.readystate 4 this.status 200){//alert(this.responseText);//判断if(this.responseText true){//用户名存在显示提示信息document.getElementById(username_err).style.display ;}else{//用户名不存在·清楚提示信息document.getElementById(username_err).style.display none;}}};
}Axios异步框架
Axios对原生的AJAX进行封装简化书写官网Axios中文文档 | Axios中文网 (axios-http.cn)
快速入门 引入axios的js文件 script srcjs/axios-0.18.0.js/script使用axios发送请求并获取响应结果 axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan
}).then(function (resp){alert(resp.data);
});axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});Axios请求方式别名
为了方便起见Axos已经为所有支持的请求方法提供了别名,修改过后会变成
// 发送get请求
axios.get(url).then(function (resp){alert(resp.data);
});// 发送post请求
axios.post(ur,参数).then(function (resp){alert(resp.data);
});JSON
概念JavaScript Object Notation。JavaScript对象表示法由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输
JSON基础语法 定义 var变量名{key1:value1,key2:value2,...};示例 var json {name:zhangsan,age:23,addr:[北京上海西安]};获取数据 变量名.key
json.nameJSON数据和Java对象转换
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库是目前Java语言中最快的JSON 库可以实现Java对象和SON字符串的相互转换。
使用 导入坐标 dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version
/dependencyJava对象转JSON String jsonStr JSON.toJSONString(obj);JSON字符串转ava对象 User user JSON.parseObject(jsonStr,User.class);案例
使用AxiosJSON完成品牌列表数据查询 script//1.当页面加我完成后发送ajax请求window.onload function (){//2.发送ajax清求axios({method:get,url:http://localhost:8080/brand-demo/selectAllServlet}).then(function (resp){//获取数据let brands resp.data;let tableData tr\n th序号/th\n th品牌名称/th\n th企业名称/th\n th排序/th\n th品牌介绍/th\n th状态/th\n th操作/th\n /tr;for(let i 0;i brands.Length; i){let brand brands[i];tableData \n tr align\center\\n td (i1) /td\n td brand.brandName /td\n td brand.companyName /td\n td brand.ordered /tdn td brand.description /td\n td brand.status /td\n \n tda href\#\修改/aa href\#\删除/a/td\n /tr;}})}
/script后端代码
// doGet代码
//1.调用Service查询
ListBrand brands brandService.selectAll();
//2.将集合转换为JS0N数据 序列化
String jsonString JSON.toJSoNString(brands);
//3.响应数据
response.setcontentType(text/json;charsetutf-8);
response.getWriter().write(jsonstring);如果觉得文章对您有帮助请帮忙点赞或者收藏如果在文章中发现什么错误或不准确的地方欢迎与我交流。
