东莞网站设计找谁,删除西部数码网站管理助手,用手机如何做网站,汕头人Ajax是对前端和后端进行数据、文本传递的一种技术。通过与服务器进行少量的数据交换#xff0c;Ajax可以使网页实现异步更新。
这意味着可以摘不重新加载整个网页的情况下#xff0c;对网页进行部分更新。
常用的ajax发送方式
XMLHttpRequest对象#xff1a;原生JavaScri…
Ajax是对前端和后端进行数据、文本传递的一种技术。通过与服务器进行少量的数据交换Ajax可以使网页实现异步更新。
这意味着可以摘不重新加载整个网页的情况下对网页进行部分更新。
常用的ajax发送方式
XMLHttpRequest对象原生JavaScript提供的API可以在不刷新的情况下与服务器进行数据欢呼。使用XHR对象发送Ajax请求需要编写一些JavaScript代码并在回调函数中处理服务器返回的数据。Fetch API可以使用Promise对象来处理Ajax请求。Fetch API更加简单灵活还支持数据的传输但是需要使用者了解Promise对象的用法。jQuery.ajaxjQuery提供的方法可以简化Ajax请求的编写也可以处理响应数据。使用该方法可以轻松发送GET \ POST \ PUT \ DELETE。Axios基于Promise的HTTP库可以摘浏览器和Node.js中发送Ajax请求。Ajax提供了简单的API可以方便的处理请求和响应数据。
XMLHttpRequest对象
XMLHttpRequest对象支持的Ajax接口
方法描述openmethodurlasync method请求的类型 url资源在服务器上的位置 asynctrue异步或false同步 sendbody 将请求发送到服务器 body消息体 addEventListenereventnamecallback 检测进度 xhr.addEventListener“progress”updateProgress xhr.addEventListener“load”transferComplete xhr.addEventListener“error”transferFailed xhr.addEventListener“abort”transferCanceled
load—— 当请求完成即使 HTTP 状态为 400 或 500 等并且响应已完全下载。
error—— 当无法发出请求例如网络中断或者无效的 URL。
progress;—— 在下载响应期间定期触发报告已经下载了多少。 XMLHttpRequest发送多种类型请求
动作HTTP方法描述查询GET获取资源创建POST创建资源修改PUT更新资源删除DELETE删除资源
JS原生Ajex接口
增加POST
document.querySelector(form).onsubmit function (e) {// 避免页面刷新e.preventDefault();var name document.querySelector(.name).value;// 1.新建XHMHttpRequest对象https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequestvar xhr new XMLHttpRequest();// 2.添加监听xhr.addEventListener(load, function () {console.log(xhr.responseText);alert(添加成功);});// 3.做配置// post添加请求头https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/openxhr.open(post, http://localhost:3000/goods);// 4.发送请求var param { name: name };// 转换成JSON格式的字符串;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringifyxhr.send(JSON.stringify(param));};
删除DELETE
document.querySelector(form).onsubmit function (e) {// 避免页面刷新e.preventDefault();var id document.querySelector(.id).value;// 1.新建XHMHttpRequest对象var xhr new XMLHttpRequest();// 2.添加监听xhr.addEventListener(load, function () {console.log(xhr.responseText);alert(删除成功!);});// 3.做配置// put修改请求头,使用拼接,采用模版字符串xhr.open(delete, http://localhost:3000/goods/${id});// 4.发送请求xhr.send();};
修改PUT
document.querySelector(form).onsubmit function (e) {// 避免页面刷新e.preventDefault();var name document.querySelector(.name).value;var id document.querySelector(.id).value;// 1.新建XHMHttpRequest对象var xhr new XMLHttpRequest();// 2.添加监听xhr.addEventListener(load, function () {console.log(xhr.responseText);alert(修改成功!);});// 3.做配置// put修改请求头,使用拼接,采用模版字符串xhr.open(put, http://localhost:3000/goods/${id});// 4.发送请求var param { name: name };xhr.send(JSON.stringify(param));};
查询GET
function getuser() {// 1.创建XMLHttpRequest对象var xhr new XMLHttpRequest();// 2.监听响应状态码xhr.addEventListener(load, function () {// 5.处理响应结果console.log(xhr.responseText);});// 3.设置请求xhr.open(GET, http://localhost:3000/users, true);// 4.发送xhr.send();} Axios
get请求步骤
axios.get(https//localhost:3000/user).then(response {// 处理成功情况console.log(response.data);}).catch(error {// 处理错误情况console.error(error);}).finally(() {// 总是会执行});
示例
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
//浏览器直接引入
/scriptscript// 渲染表格function renderTable(users) {const tbody document.getElementById(userBody);tbody.innerHTML users.map(user trtd${user.id}/tdtd${user.name}/tdtd${user.sex 1 ? 男 : 女}/tdtd${user.birth}/tdtd${user.addr}/tdtdbutton onclickprepareEdit(${user.id})编辑/buttonbutton classdelete-btn onclickdeleteUser(${user.id})删除/button/td/tr).join();}//获取用户数据function getmessage() {axios.get(http://8.130.50.58:3000/users).then(res {console.log(res)renderTable(res.data)/* console.log(renderTable(res.data)); */}).catch(err {console.error(err);})}// 新增用户function addUser() {const id document.getElementById(newId).value;const name document.getElementById(newName).value;const sex document.getElementById(newSex).value;const birth document.getElementById(newBirth).value;const addr document.getElementById(newAddr).value;axios.post(http://8.130.50.58:3000/users, {id,name,sex,birth,addr}).then(res {console.log(res);alert(新增成功);getmessage();//清空表单document.getElementById(newId).value ;document.getElementById(newName).value ;document.getElementById(newSex).value ;document.getElementById(newBirth).value ;document.getElementById(newAddr).value ;}).catch(err {console.error(err);});}//删除用户function deleteUser(id) {axios.delete(http://8.130.50.58:3000/users/${id}).then(res {console.log(res);alert(删除成功);getmessage();}).catch(err {console.error(err);});}//编辑用户:点击编辑按钮后回显到表单function prepareEdit(id) {axios.get(http://8.130.50.58:3000/users/${id}).then(res {console.log(res);const user res.data;document.getElementById(editId).value user.id;document.getElementById(editName).value user.name;document.getElementById(editSex).value user.sex;document.getElementById(editBirth).value user.birth;document.getElementById(editAddr).value user.addr;}).catch(err {console.error(err);});}getmessage()//修改用户function updateUser() {const id document.getElementById(editId).value;const name document.getElementById(editName).value;const sex document.getElementById(editSex).value;const birth document.getElementById(editBirth).value;const addr document.getElementById(editAddr).value;axios.put(http://8.130.50.58:3000/users/${id}, {name,sex,birth,addr}).then(res {console.log(res);alert(修改成功);getmessage();})}/script Fetch API
GET 请求
fetch(https://api.example.com/data).then(response {if (!response.ok) {throw new Error(网络请求失败);}return response.json(); // 解析为 JSON}).then(data {console.log(获取的数据:, data);}).catch(error {console.error(请求错误:, error);});
POST 请求
const postData {title: 新文章,content: 这是一篇使用 Fetch API 创建的文章
};fetch(https://api.example.com/posts, {method: POST,headers: {Content-Type: application/json},body: JSON.stringify(postData)
})
.then(response response.json())
.then(data console.log(创建成功:, data))
.catch(error console.error(创建失败:, error));
Content-Type参考HTTP content-type_weba的contenttype-CSDN博客
