首先来说说我对ajax的理解:简单地来说就是在不重新刷新页面的情况下,实现数据的调用获得更新。
我在这里介绍的是要过jquery封装好的ajax,大家可以去了解一下使用原生的XMLHttpRequest对象请求的知识点。
ajax的各种参数老是记不全,这次也来记录一下几个常用的。
1.url:发送请求的地址
2.type:要求为String类型的参数,请求方式(get/post)默认情况下是get。注意其他Http请求也可,例如put、delete等,但是要根据浏览器是否支持
3.timeout:设置请求超时的时长
4.async:是否为异步请求,默认设置为true,如果需要设未同步请求,修改为false即可
5.cache:默认true,false表示将不会从浏览器缓存中加载信息
6.daa:要求为Object或String类型的参数。发送到服务器的数据,如果不是字符串,将自动转换为字符串格式。
7.dataType:预期服务器返回回来的数据类型。可用类型:html(纯文本html信息)、xml、json、jsonp、text(返回纯文本字符串)
8.success:要求为Function()类型的参数,请求成功后调用的回调函数,存在两个参数。
(1)由服务器返回,根据dataType参数进行处理后的数据
(2)描述状态的字符串
function(data,textStatus){
data可以是html、text等
}
9.error:要求为Function()类型的参数,请求失败后调用的回调函数
该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
下面进入正题。
js部分代码:
msg接收后台传递的字符串数据,通过html的形式在客户端进行显示
1 <sctipt type="text/javascript"> 2 $.ajax({ 3 type:"post", 4 url:"/Teachers/AjaxCheckLoginName", 5 dataType:"html", 6 data:"teaName="+$("#TeacherLoginName").val(), 7 async:true, 8 beforedSend:function(XMLHttpRequest){ 9 $("#showResult").text("正在查询...") 10 11 }, 12 success:function(msg){ 13 $("#showResult").html(msg); 14 $("#showResult").css("color","red") 15 } 16 }); 17 </script>
这里使用ajax前你可以引用jquery3.4.1或者其他版本。
html部分代码(ASP.NET MVC视图):
1 <label>账号</label> 2 @Html.TextBox("TeacherLoginName", null, new { @class = "form-control", type = "text", placeholder = "请输入账号" }) 3 <input type="button" id="btn" value="查看此账号是否存在" onclick="IsFindTeaLoginName()" /> 4 <div id="showResult" style="float:left"></div> 5 <br />
后台代码部分(控制器):
在后台定义返回值为string类型的方法,通过参数的形式接受ajax传递过来的文本框参数,拿到之后去数据库比较,存在就return一个字符
否则,就return "可以使用" 的字符串
1 public string AjaxCheckLoginName(string teaName) 2 { 3 if (db.Teacher.Where(t => t.TeacherLoginName == teaName).ToList().Count > 0) 4 { 5 //Response.Write(""); 6 return "用户名已经存在!"; 7 } 8 else 9 { 10 //Response.Write(""); 11 if (teaName=="") 12 { 13 return "请输入一个账号..."; 14 } 15 else 16 { 17 return "您可以使用此用户名!"; 18 } 19 20 } 21 }