JQuery+Ajax与服务器端进行交互

Posted 2021-07-18 yuwenS.

Ajax和JQuery与服务器端进行交互

与原生Ajax和服务器交互相比，Ajax通过JQuery和服务器进行交互代码更加简单，更加通俗易懂，不会像原生原生Ajax那样繁琐。

交互的步骤

1. 首先要保证自己的环境中存在JQuery环境
   如果没有可以去JQuery官网下载,下载成功后，讲jquery.js文件导入你要做的项目中即可。或者可以引入JQuery的 cdn。
   

2. 通过方法与服务器进行交互

$.ajax({name:value, name:value, ... })  //基本语法

从语法可以看出，方法中的请求参数是一个或多个名称/值对

常见的请求参数

名称	值和描述
url	请求的接口路径URL，默认是当前页面
type	请求的类型（get 或 post）
data	发送到服务器端的数据，默认也是名称/值对也可以直接传值
dataType	预期服务器返回的数据类型
success	请求成功后的回调函数
error	请求失败后的回调函数
async	请求是否异步处理，默认是 true
contentType	发送数据到服务器时所使用的内容类型，默认是：“application/x-www-form-urlencoded”
…	…

如果要了解更多的请求参数可以参考 更多参数

与服务器交互的具体实现代码

列举两种请求类型的具体实现

get请求

 function 方法名{   //一般这个步骤存在一个事件当中
 		var id = 获取id的操作; //得到id的值
        $.ajax({
            url: "http://localhost:8080/findUserById",  //根据用户id查询用户的接口URL
            data: {    // 这个是传数据的第一种方法还可以写
                id:id;
            },
            data: id, //这个是传数据的第二种方法
            type: 'get', //get类型
            success:function (resp) {
               		//resp就是后台返回的数据，后续操作这里就不演示了
            }
        })
    }

post请求

 function 方法名{   //一般这个步骤存在一个事件当中
 		var username = 获取username的操作; //得到用户名
 		var password = 获取password的操作; //得到密码
        $.ajax({
            url: "http://localhost:8080/toLogin",  //登录的接口URL
            data: {    
                username: username,  //用户名
                password: password,  //密码
            },
            type: 'post', //post类型
            success:function (resp) {
               		//resp就是后台传回的数据，可以查询到是否登录成功，登录成功后的操作这里就不做演示了
            }
        })
    }

另提一点：很多的请求参数没写是因为很多都有默认值，不需要写，还有些请求参数根据自己的需求再添加

如果想要了解原生Ajax与服务器端交互请看这里：https://blog.csdn.net/qq_45334037/article/details/117569454