这是我上课写的笔记，方便我自己查看。看到的大佬也可以方便看看谢谢-CSDN博客

本文链接：https://blog.csdn.net/weixin_73548040/article/details/133128907

AJAX概念

AJAX全称为Asynchronous JavaScript and XML,意思是异步的JavaScript和XML技术
AJAX最大的特点是实现了异步请求,提高了用户体验
传统的HTTP请求都是同步的,须要等待服务器响应才能对页面进行后续操作
AJAX请求可以异步发送,无需等待服务器完成响应,浏览器可以顺畅操作
AJAX通常请求的是数据,不会刷新整个页面,实现了局部刷新

JQuery实现AJAX

JQuery提供了多种函数方便实现AJAX请求
$.ajax()函数是完整的AJAX实现,可以设置所有参数
- type指定GET/POST请求类型
- url指定请求地址
- data发送的数据
- success成功回调函数
- error错误回调函数
$.post()函数简化了POST请求
- 第一个参数是url地址
- 第二个参数是要发送的数据
- 第三个参数是成功的回调函数
$.get()函数简化了GET请求
- 用法与$.post()类似
serialize()可以把表单序列化为请求字符串

典型AJAX应用场景

输入计算数据,点击按钮进行计算
- 获取输入数据,使用$.post()发送给服务器
- 服务器计算后返回计算结果
- 在回调函数将结果更新到页面中
输入关键字进行查询
- 获取输入关键字,使用$.get()发送给服务器
- 服务器查询后返回结果
- 在回调函数将结果更新到页面中
注册/登录表单验证
- 获取表单数据,使用$.post()发送给服务器
- 服务器验证后返回结果
- 在回调函数中更新提示信息或跳转页面

综上所述,JQuery的AJAX实现了异步交互,提升了用户体验,适用于数据请求、验证、查询等场景,非常重要。

//下面是我上课自己写的相关案例
$.ajax({
     type: "get",  //提交方式
     url: "/Home/Add",//提交的url
     data: "num=10",//传递的数据
     success: function (msg) {//ajax调用成功后回调的函数，msg表示返回的结果
          $("#sRestul").html(msg);
     },
     error: function () {
          alert("ajax请求出错！");
     }
});

//post提交

$.post("/Home/Add", "num=10", function (data) {
      $("#sRestul").html(data);
});
//get提交
$.get("/Home/Add", "num=10", function (data) {
      $("#sRestul").html(data);
});

//案列
1.ajax提交
<script>
    $(function () {
        $("#btnCal").click(function () {

            //先获取文本框中输入的值
            var a = $("#txtNum").val();

            $.ajax({
                type: "post",
                url: "/Jquery5/Add",
                data: "num="+a,
                //data:{num:a},
                success: function (msg) {
                    //如果ajax执行成功
                    $("#spanResult").html(msg);
                },
                error: function () {
                    alert("ajax请求出错啦！！");
                }
            });
        });
    })
</script>
//前台
<body>
    <div> 
        <input type="text" id="txtNum"/>
        <input type="button" value="计算" id="btnCal"/>
        <span id="spanResult"></span>
    </div>
</body>

//后台代码
int sum = 0;
for (int i = 1; i <= num; i++)
{
    sum += i;
}
return Content(sum.ToString());

2.post
<script>
    $(function () {

        $("#btnSearch").click(function () {

            $.post(
                "/Jquery5/GetUser",
                "username=" + $("#txtName").val(),
                function (data) {
                    $("#spanResult").html(data);
                });

        })

    })
</script>

//前台html
<body>
    <div> 
        <input type="text" id="txtName" />
        <input type="button" value="查找" id="btnSearch" />
        <br />
        <span id="spanResult"></span>
    </div>
</body>

//后台访问数据库
//先准备一个用户集合
string result = string.Empty;

List<User> list = new List<User>(){
    new User(){username="张三",pwd="aaa"},
    new User(){username="李四",pwd="bbb"},
    new User(){username="王五",pwd="ccc"},
};

//判断用户输入的用户名是否存在
for (int i = 0; i < list.Count; i++)
{
    if (username == list[i].username)
    {
        result = "姓名：" + list[i].username + ",密码：" + list[i].pwd;
        break;
    }
}

return Content(result);

3.get
//前台
<script>
    $(function () {

        $("#btn").click(function () {

            //普通提交方式
            //参数：username=admin&&pwd=123
            /*
            $.post(
                "/Jquery5/Login",
                "username=" + $("#username").val() + "&pwd="+$("#pwd").val(),
                function (data) {
                    alert(data);
                });
            */


            //表单序列化
            $.get(
                "/Jquery5/Login",
                $("#myform").serialize(),
                function (data) {
                    alert(data);
                });
        });

    })
</script>

<body>
    <div> 
        <form id="myform">
            用户名：<input type="text" name="username" id="username" /><br />
            密码：<input type="password" name="pwd" id="pwd" /><br />
            <input type="button" value="登录" id="btn" />
        </form>
    </div>
</body>

//后台
if (username == "admin" && pwd == "123")
{
    return Content("ok");
}
else
{
    return Content("error");
}