Ajax的一些方法

开发工具与关键技术: VisualStudio 2015 mvc

作者:杨泽平

撰写时间:2019、4、4

我们在做一些Mvc项目有许多操作需要用到ajax,而ajax指的是通过
HTTP 请求加载远程数据。

我们常用的一些参数有: url:请求路径;

                     Type:请求方式 有两种get/post,默认get,一般用post;

   	             dataType:预期服务器返回的数据类型,一般用json;

      	             async:默认true 为异步,false为同步;

                      success:请求成功后的回调函数;

                       error:在请求出错时调用。

它的写法如图所示:
在这里插入图片描述

它还有一种简写的写法,这也是我们比较常用的写法,如图所示:

在这里插入图片描述

Ajax可以实现异步,异步可以在等待服务器响应时执行其他脚本,所以异步更新是可以实现不重新加载整个网页的状态下,对网页的部分进行更新;而同步,它跟异步的区别就是,同步是按先后顺序执行,正是因为这样,所以它在等待服务器响应完成的这个过程不会继续执行其他的东西,如果遇到服务器缓慢或繁忙的时候,可能就会出现问题。

Ajax中还有两个常用的方法get和post,get和post指的是:通过远程
HTTP 请求载入信息,这两者各有优缺点,post方法:请求不会被缓存、不会保留在浏览器历史记录中、不能被收藏为书签、对数据长度没有要求,而get方法则是相反,还有一点要注意的是,get的安全性较差,所以在处理带有敏感数据时不要使用。

以上面的写法为例,我们通过控制台输出,可以看到请求成功后的返回值,这里我写的是post的,而get是一样的。

如图所示:
在这里插入图片描述

我们在浏览器网络后台这里也可以看到他的请求信息。

如图所示:

在这里插入图片描述

Ajax还有很多参数和方法,这些是比较常用的方法。

发布了34 篇原创文章 · 获赞 2 · 访问量 3841
展开阅读全文

宿舍管理系统用ajax实现添加和修改,大佬看一下哪错了?

12-24

宿舍管理系统修改之后点击保存,页面的数据没有修改成功,但是在前端调试出来的是修改后的值,控制台输出的也是修改后的值,哪位大佬帮忙看一下哪错了? ``` <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <script src="${pageContext.request.contextPath}/bootstrap/js/jQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li:eq(1)").addClass("active"); }); </script> <script type="text/javascript"> //添加 function add() { //获取表单中输入的值 var uName = $("#userName").val(); var uPass = $("#password").val(); var name = $("#name").val(); var sex = $("#sex").val(); var tel = $("#tel").val(); var dormManagerId = $("#dormManagerId").val(); //alert(uName + " " + uPass + " " + name+" "+sex + " " + tel+" "+dormManagerId ); $.ajax({ type : "POST", url : "dormManager", data : { action:"add", userName : uName, password : uPass, name : name, sex : sex, tel : tel }, success : function(x) { var json = eval("(" + x + ")"); if (json.status == 0) { alert(json.msg); } else if (json.status == 1) { location.href = "mainAdmin.jsp"; } } }) } function update(){ //获取表单中输入的值 var uName = $("#userName").val(); var uPass = $("#password").val(); var name = $("#name").val(); var sex = $("#sex").val(); var tel = $("#tel").val(); var dormManagerId = $("#dormManagerId").val(); $.ajax({ type : "POST", url : "dormManager", data : { action:"update", userName : uName, password : uPass, name : name, sex : sex, tel : tel, dormManagerId : dormManagerId }, success : function(x) { var json = eval("(" + x + ")"); if (json.status == 0) { alert(json.msg); } else if (json.status == 1) { location.href = "mainAdmin.jsp"; } } }) } </script> <div class="data_list"> <div class="data_list_title"> <c:choose> <c:when test="${dormManager.dormManagerId!=null }"> 修改管理员 </c:when> <c:otherwise> 添加管理员 </c:otherwise> </c:choose> </div> <form action="dormManager?action=save" method="post" onsubmit="return checkForm()"> <div class="data_form" > <input type="hidden" id="dormManagerId" name="dormManagerId" value="${dormManager.dormManagerId }"/> <table align="center"> <tr> <td><font color="red">*</font>用户名:</td> <td><input type="text" id="userName" name="userName" value="${dormManager.userName }" style="margin-top:5px;height:30px;" /></td> </tr> <tr> <td><font color="red">*</font>密码:</td> <td><input type="password" id="password" name="password" value="${dormManager.password }" style="margin-top:5px;height:30px;" /></td> </tr> <tr> <td><font color="red">*</font>重复密码:</td> <td><input type="password" id="rPassword" name="rPassword" value="${dormManager.password }" style="margin-top:5px;height:30px;" /></td> </tr> <tr> <td><font color="red">*</font>姓名:</td> <td><input type="text" id="name" name="name" value="${dormManager.name }" style="margin-top:5px;height:30px;" /></td> </tr> <tr> <td><font color="red">*</font>性别:</td> <td> <select id="sex" name="sex" style="width: 90px;"> <option value="">请选择...</option> <option value="男" ${dormManager.sex eq "男"?'selected':'' }>男</option> <option value="女" ${dormManager.sex eq "女"?'selected':'' }>女</option> </select> </td> </tr> <tr> <td><font color="red">*</font>联系电话:</td> <td><input type="text" id="tel" name="tel" value="${dormManager.tel }" style="margin-top:5px;height:30px;" /></td> </tr> </table> <div align="center"> <button type="button" onclick="add()" class="btn btn-primary" />保存   <button class="btn btn-primary" type="button" onclick="javascript:history.back()">返回</button> </div> <div align="center"> <font id="error" color="red">${error }</font> </div> </div> </form> </div> ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览