超级详细Ajax发送请求（接受提示信息或者返回参数）

Ajax 在网页开发中必不可少，经常遇到，这里我写一下开发过程中比较常用的技术。
开发重点注意：
1、用户体验
2、程序性能、安全、可维护性、等等

// 提交数据到后台处理
$.ajax({url: "login",      //（默认为当前页地址）发送请求的地址async:true,      //（默认设置为true、异步请求），异步请求（true）或者同步请求（false）type:"POST",    //（默认为get）请求方式post或get、注意：其他http请求方法，例如update和delete也可以使用，但仅部分浏览器支持。data:{id:id},  //发送到服务器的数据（这里只演示一个id、一般根据自己表单需求随便加）beforeSend:function (){    //Ajax在发送请求前、提供了一个对象函数，若返回return false;可以取消本次请求showModal();   //可以什么都不写 一般的表单提交这个请求前的函数我们可以直接不要，比如：执行一个自定义函数$("#submit").attr({ disabled: "disabled" }); //常用的就是  ：比如：禁用按钮防止重复提交},success: function(result){   //成功后调用的回调函数 这里只放了一个参数console.log("结果"+result); //重点来了，当我们后台返回字符串是json格式的时候 如果你直接result.msg=="sucess" 是取不到json值的var res = $.parseJSON(result);  //用jQuery处理传过来的json值console.log("处理结果"+res);//console.log("处理结果"+res.userName);   //取出单个值if(res.msg == "success"){        //再用 res.msg=="sucess" 就可以取到json值了alert("操作成功");}else{alert("操作失败");}},error: function (result) {     //请求失败时被调用的函数  一般我很少用，根据需求 不是必须的console.info("error: " + result);}});

@ResponseBody
@RequestMapping(value="findByIdUserName")public String findByIdUserName(HttpServletRequest request,HttpServletResponse response,HttpSession session){//map就是一个容器，主要调用put（）这里用于存我们的返回值 用于前台提示Map<String, Object> result = new HashMap<>();int id = Integer.parseInt(request.getParameter("id"));User user = new User();//调用service层接口方法，根据需求写自己的接口 与数据库打交道  接口的代码就不贴了 懂得人都知道user= userService.getUserNameById(id);//String userName = user.getUsername(); //可得到单个参数值if( null ! = user){result.put("msg","success");         //函数执行完了之后，将返回结果存入map容器 将其带入前台ajax进行接收//result.put("userName ", userName );  存入单个值result.put("user", user);  //对于数据库操作后得到的单个参数值或者对象拿到后存入map容器 将其带入前台也可以ajax进行接收//session.setAttribute("user", user);  //这里也可以把这个这个单个参数值或者对象值存入session 然后在页面直接取到：${user}}else{result.put("msg","error"); }return JSON.toJSONString(result);   //对象转化为json字符串  }

超级详细Ajax发送请求（接受提示信息或者返回参数）相关推荐

React ajax 发送请求（六）
React ajax 发送请求(六) React 官网链接: 英文官网中文官网接着上节 React 代理配置(五) 前言在实际做React 项目的时候, 前端应用需要通过 ajax 请求与后台进 ...
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
Django Ajax发送请求使用方法
首先需要引入Jquery这个库其次: 需要引入csrf_token 原因是因为django 表单认证需要csrf认证最后,就是正常执行ajax发送请求示例代码如下: <script src ...
jQuery里如何使用ajax发送请求
回到文章总目录本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...
AJAX，SpringMVC，拦截器（Ajax发送请求经过SpringMVC拦截器重定向其他页面失败）
Ajax发送请求经过SpringMVC拦截器重定向其他页面失败借鉴出处 Ajax是通过异步请求后台,获取数据,局部刷新页面,因此,即使后台进行页面跳转的编码,前台请求完毕以后,只会执行ajax的回 ...
js采用ajax发送请求获取数据（实例操作）
来,案例之前,容我分享一下js如何发送请求. 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,tr ...
JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
$.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
前端学习（2465）：ajax发送请求
原文链接:https://www.cnblogs.com/0x29a/p/11231950.html 1. 创建XMLHttpRequest异步对象步骤一代码引自:https://www.w3sch ...

超级详细Ajax发送请求（接受提示信息或者返回参数）

超级详细Ajax发送请求（接受提示信息或者返回参数）相关推荐

最新文章

热门文章